隐藏和显示 ngFor 中的值

Question

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

我需要更改这些图标。我会从*ngFor中获得Boolean值 通过使用{{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

你也试过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

如果"name"是离子图标组件的角度输入属性，则可以使用：

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

如果它是常用的 HTML 属性，则可以执行以下操作：

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

避免重复标记两次，就像 ngIf 或 ngSwitch 一样