如何在使用 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 它将 return isSold 这是每个项目的全局值。

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

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

How to apply style to specific item in the array iterating using *ngFor when on click in Ionic using Angular

arrays

angular

ionic-framework

ngfor

ionic5