Показать *ngДля элементов один за другим Ionic 4
У меня есть объект 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>
Вы также можете увидеть изображение того, что я имею в виду:
Ответы 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++;
}
попробуйте использовать угловой slicePipe
https://angular.io/api/common/SlicePipe
создайте noOfItem = 1 в своем компоненте ts
*ngFor = "let w of warmup | slice:0:noOfItem"
Затем управляйте noOfItem на основе своей логики.
Я установил значение noOfitems равным 1. Я добавил слайс в ngFor: <ion-card *ngFor = "let w of warmup | slice:noOfItem-1:noOfItem"> И метод done выглядит следующим образом: done(){ if (this.noOfItem < this.warmup.length) { this.noOfItem += 1; } else { console.info('КОНЕЦ ДНЯ 1') } Работает отлично! Большое спасибо, приятель!
можно использовать ионные слайды