arrays - 如何在使用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创建了一个工作示例。有人可以帮忙吗？

Answer 1

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

ngStyle如果您isSold更改标志：car.sold = !car.sold和ngStyleascar.sold ? {color: 'red'} : ''