Looping durch Array mit ngFor Verwendung der nächsten Schaltfläche

Question

Etwas neu zu Ionic 3 - Ich bin auf der Suche nach einem Array durchlaufen, wenn ich ngFor verwenden. Ich habe die Slice-Methode verwendet, um jeweils ein Element aus dem Array anzuzeigen. Ich suche das nächste Element im Array anzuzeigen, wenn ich die Schaltfläche „Weiter“ klicken“.

<div *ngFor="let reference of content | slice:0:1;"> 
<div> {{reference.item}} </div> 
<div> {{reference.image}} </div> 
<div> {{reference.field2}} </div> 

<button ion button> Next </button> 

Nicht sicher, ob ngFor der beste Ansatz ist, oder wenn es eine bessere Alternative ist. Vielen Dank!

Answer 1

Wenn Sie nicht alle Daten als Liste anzeigen möchten, dann benötigen Sie nicht ngFor hier. Sie können Daten nur zeigen, indem sie den Index anzugeben, die auf jedem nächsten Tastenklick erhöht wird.

reference:any; 
currentIndexToShow:number = 0; 

nextButtonClick() { 

    this.currentIndexToShow++; 
    this.reference = content[currentIndexToShow]; 

} 

<div> {{reference?.item}} </div> 
<div> {{reference?.image}} </div> 
<div> {{reference?.field2}} </div>