Ion-Progress-Bar внутри списка ngFor для каждого элемента

Question

Когда я нажимаю на ионный элемент, я устанавливаю для "загрузки" значение true. Как заставить индикатор выполнения отображаться только для элемента, на который я нажал, а также обновлять только прогресс для того, на который щелкнули?

Прямо сейчас он показывает каждый из баров одновременно и обновляет прогресс для каждого из них одинаково.

<ion-item-sliding *ngFor="let item of items">
    <ion-item *ngIf="lessonSegment == 'available'" (click)="download()">
      <ion-row>
      <ion-progress-bar *ngIf="downloading" color="primary" value="0.5" size="12"></ion-progress-bar>
      <ion-col size="12">
        {{item.name}}
      </ion-col>
      <ion-col size="12">
        {{item.description}}
      </ion-col>
    </ion-row>
    <div slot="end" class="download-text">Download</div>
    </ion-item>
</ion-item-sliding>

Answer 1

Так что в основном вам нужно добавить поле загрузки в каждый элемент, и

шаблон

...
<ion-item *ngIf="lessonSegment == 'available'" (click)="download(item)">
...
  <ion-progress-bar *ngIf="item.downloading" color="primary" value="0.5" size="12"></ion-progress-bar>
...

Ts файл

...
download(item) {
   ...
   item.downloading = true;
   ...
}
...

Надеюсь, это поможет.