ngClass 在 Angular 中与 ngFor 一起使用来切换图标答案

【问题标题】：ngClass used with ngFor in Angular to toggle iconsngClass 在 Angular 中与 ngFor 一起使用来切换图标
【发布时间】：2020-10-23 13:17:16
【问题描述】：

我有这段来自component.html的代码

<div *ngFor="let passenger of passengers; let i=index">
  {{ passengers[i].child ? 'Child' : "" }}
  Name: {{ passengers[i].name }}
  Seat: {{ seats[i]}}
  Extra luggage: {{ passengers[i].luggage ? 'Yes' : 'No' }}
</div>

行李部分不选择是或否，这取决于用户的选择，我想显示图标（如果行李 = true，则显示手提箱，如果行李 = false，则显示删除线图标）

我正在考虑使用 ngClass 执行此操作，但我不确定如何正确执行此操作，因为这些 div 是通过 ngFor 迭代的，并且它们的数量也取决于用户的选择。

<div [ngClass]="['greenIcon', 'redIcon']">Luggage</div>

提前致谢！

【问题讨论】：

标签： javascript angular binding ngfor ng-class

【解决方案1】：

这取决于您使用的图标方法/库，但是

您应该能够使用 [ngClass] 并将其简化为：

<div *ngFor="let passenger of passengers; let i = index">
    {{ passenger.child ? 'Child' : "" }}
    Name: {{ passenger.name }}
    Seat: {{ seats[i]}}
    Extra luggage: 
    <div [ngClass]="{'greenIcon': passenger.luggage, 'redIcon': !passenger.luggage}">
        {{ passenger.luggage ? 'Yes' : 'No' }}
    </div>
</div>

[ngClass] 可以用作字典，其中类是键，值是布尔值，以确定是否应该应用它。 NgClass

[ngClass]="{ 'class-name': true }"

【讨论】：