Показать ngДля предметов по одному Ionic 4

Question

У меня есть объект json, и я хочу показывать элементы один за другим. Когда я использую Angular ng, для всех элементов отображается на экране. Я хочу показать первый, а когда я нажимаю кнопку, показать следующийдо последнего. Я пытался использовать 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

попробуйте использовать угловой slicePipe

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

создайте noOfItem = 1 в вашем компоненте ts

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

Затем управляйте noOfItem на основе вашегологика

Answer 2

Вам нужно будет поддерживать другой массив, который будет содержать шаблоны.

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