一项一项地显示 *ngFor 项目 Ionic 4

Question

我有一个 JSON 对象，我想一一显示这些项目。当我使用 Angular *ngFor 时，所有项目都显示在屏幕上。我想显示第一个，当我单击按钮时显示下一个直到最后一个。我试过使用 Angular *ngIf 但我失败了。

<ion-header>
 <ion-toolbar>
  <ion-buttons slot="start">
  <ion-icon size="large" color="warning" name="arrow-round-back" 
  (click)="abort()"></ion-icon>
  </ion-buttons>
 <ion-title></ion-title>
 </ion-toolbar>
</ion-header>

<ion-content padding>    
<ion-card *ngFor="let w of warmup;">
 <ion-card-header>
  <ion-card-title>
    {{w.title}}
  </ion-card-title>
  <ion-card-content>
    <img src="{{w.url}}">
  </ion-card-content>
</ion-card-header>
<ion-button slot="end" size="small" (click)="done">DONE</ion-button>
</ion-card>
</ion-content>

你也可以看到我的意思的图像：

Answer 1

您将不得不维护另一个用于保存模板的数组。

<ion-card *ngFor="let w of warmupTemp;" [w]="w"></<ion-card>

您的 ts 文件将是：

warmpup = []; // actual data array
warmupTemp= []; // template array
index = 0;
addWarmUp() {
    this.warmupTemp.push(warmup[index]);
    index++;
}

Answer 2

尝试使用angular slicePipe

https://angular.io/api/common/SlicePipe

在您的组件 ts

中创建一个 noOfItem = 1

*ngFor="let w of warmup | slice:0:noOfItem"

然后根据你的逻辑控制noOfItem

一项一项地显示 *ngFor 项目 Ionic 4

Show *ngFor items one by one Ionic 4

angular

ionic4

angular7