如何在使用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();
}

我使用 Stackblitz 创建了一个working example。有人可以帮忙吗？

Answer 1

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

您应该验证 ngStyle 而不使用 isSold，如果您更改标志：car.sold = !car.sold，并且 ngStyle 为 car.sold ? {color: 'red'} : ''，您的已售逻辑应仅归因于特定商品。