与Angular中的ngFor配合使用的ngClass，用于切换图标

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

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

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