Как применить стиль к указанному элементу c в массиве, итерируя с помощью * ngFor при нажатии на Ioni c с использованием Angular

Question

Я пытаюсь применить стиль для определенного элемента c в итерируемом массиве при нажатии. Проблема, с которой я сталкиваюсь, заключается в том, что стиль применяется ко всем элементам массива.

Я хочу применять стиль динамически только к этому конкретному индексу при нажатии кнопки.

Ниже приведены выдержки из моего кода

HTML file

<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 file

isSold = false; 

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

У меня есть создал рабочий пример , используя Stackblitz. Может ли кто-нибудь помочь, пожалуйста?

Answer 1

приписывая this.isSold и проверяя car.sold || isSold, он вернет isSold, который является глобальным значением для каждого элемента.

Вы должны проверить ngStyle без isSold, ваших проданных логи c следует относить только для определенного элемента c, если вы измените флаг: car.sold = !car.sold, а ngStyle как car.sold ? {color: 'red'} : ''