Question

我需要在列表中显示和隐藏元素。该列表将使用*ngFor填充。

我需要更改这些图标。我会从Boolean获得*ngFor值使用{{item.check}}。我不应该使用ts文件。我需要在.html文件中进行此修改。

 <ion-grid>
        <ion-row *ngFor="let item of dailyDays"> 
            <ion-col>
                <ion-icon show={{item.check}} name="checkmark"></ion-icon>
                <ion-icon show={{item.check}} name="close"></ion-icon>
            </ion-col>
        </ion-row>
</ion-grid>

有人可以使用Boolean

中的{{item.check}}值来帮助我显示和隐藏这些项目

Answer 1

您可以使用[attr.name]属性（属性绑定）

<ion-icon [attr.name]="item.check ? 'checkmark': 'close'"></ion-icon>

Answer 2

这对我有用这将是否始终有效

<ion-grid>
        <ion-row *ngFor="let item of dailyDays"> 
            <ion-col>
                <ion-icon [hidden]="item.check" name="checkmark"></ion-icon>
                <ion-icon  [hidden]="item.check" name="close"></ion-icon>
            </ion-col>
        </ion-row>
    </ion-grid>

Answer 3

did you try also ngIf

<ion-col>
                <ion-icon *ngIf="item.check" name="checkmark"></ion-icon>
                <ion-icon  *ngIf="!item.check" name="close"></ion-icon>
            </ion-col>

Answer 4

您应该使用ngSwitch

按如下方式编辑代码应该有效。

<ion-grid>
    <ion-row *ngFor="let item of dailyDays"> 
        <ion-col [ngSwitch]="item.check">
            <ion-icon *ngSwitchCase="true" name="checkmark"></ion-icon>
            <ion-icon *ngSwitchCase="false" name="close"></ion-icon>
        </ion-col>
    </ion-row>
</ion-grid>

您也可以为默认图标

添加* ngSwitchDefault而不是大小写

使用以下代码导入ts文件中的ngSwitch模块：

import { NgSwitch } from @angular/common;

Answer 5

如果＆＃39; name＆＃39;是ion-icon组件的Angular Input属性，您可以使用：

＆＃13;

<ion-col>
  <ion-icon [name]="item.check ? 'checkmark' : 'close'"></ion-icon>
</ion-col>

＆＃13;

如果它是通常的HTML属性，您可以这样做：

＆＃13;

<ion-col>
  <ion-icon name="{{ item.check ? 'checkmark' : 'close' }}"></ion-icon>
</ion-col>

＆＃13;

＆＃13; 避免重复标记两次，就像对于ngIf或ngSwitch

一样

隐藏和显示ngFor中的值

5 个答案: