为每个项目显示的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;
   ...
}
...

希望有帮助。