Javascript ngClass与ngFor一起用于角度切换图标

这段代码来自component.html

{{乘客[i].儿童？'child'：“”}
姓名：{{乘客[i].Name}
座位：{{座位[i]}
额外的行李：{{乘客[i]。行李？'Yes'：'No'}

我希望显示图标（如果行李箱为true，则显示行李箱；如果行李箱为false，则显示删除线图标），而不是根据用户的选择对行李箱部分显示Yes（是）或No（否）

我曾考虑使用

ngClass

来实现这一点，但我不确定如何正确地实现这一点，因为这些div是通过

ngFor

迭代的，它们的数量也取决于用户的选择

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

行李

---

提前谢谢

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

您应该能够使用[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]="{ 'class-name': true }"