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

Когда я нажимаю на ионный элемент, я устанавливаю «скачивание» в 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>

1 Ответ

0 голосов
/ 01 февраля 2019

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

Шаблон

...
<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;
   ...
}
...

Надеждаэто помогает.

...