如何使用Angular在Ionic中单击时使用*ngFor迭代将样式应用于数组中的特定项

Question

单击时，我正在尝试为可迭代数组中的特定项应用样式。我面临的问题是，它将样式应用于数组中的所有项。

我只想在单击按钮时将样式动态地应用于特定的索引。

以下是我的代码的摘录

HTML文件

<ion-list>
<ion-item-sliding *ngFor="let car of cars; let i=index;" #item>
<ion-item [ngStyle]="car.sold || isSold ? {color: 'red'} : ''">
<ion-label>{{car.name}}</ion-label>
</ion-item>
<ion-item-options icon-start>
<button ion-button (click)="markAsSold(car, i, item)">
Mark as Sold
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list> 

TS文件

isSold = false; 
markAsSold(car, index, item){
this.isSold = !car.sold;
item.close();
}

我使用Stacklitz创建了一个工作示例。有人能帮忙吗？

Answer 1

通过归属this.isSold并验证car.sold || isSold，它将返回isSold，它是每个项目的全局值。

您应该在没有isSold的情况下验证ngStyle，如果您将标志car.sold = !car.sold和ngStyle更改为car.sold ? {color: 'red'} : ''，则您的销售逻辑应仅归因于特定项目