ngClass 在 Angular 中与 ngFor 一起用于切换图标

Question

我有这段代码来自 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>

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

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

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

提前致谢！

Answer 1

这取决于您使用的是什么图标method/library，但是

您应该能够使用 [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 }"

ngClass 在 Angular 中与 ngFor 一起用于切换图标

ngClass used with ngFor in Angular to toggle icons

javascript

angular

binding

ngfor

ng-class