ngFor 列表中的 Ion-Progress-Bar 显示每个项目

Question

当我点击 ion-item 时，我将 'downloading' 设置为 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

所以基本上你需要在每个项目中添加 downloading 字段，并且

模板

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

希望对您有所帮助。

ngFor 列表中的 Ion-Progress-Bar 显示每个项目

Ion-Progress-Bar Inside ngFor List Showing For Every Item

angular-ng-if

ionic-framework

ngfor

angular

ionic4

模板

Ts文件