使用NEXT按钮通过NGFOR循环循环

Question

离子3的新事物 - 当我使用ngfor时，我希望循环遍历数组。我使用切片方法一次显示一项项目。当我单击"下一个"按钮"时，我都希望在数组中显示下一个项目。

<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>

不确定NGFOR是最好的方法还是有更好的选择。谢谢！

Answer 1

如果您不想将所有数据显示为列表，则在此处不需要NGFOR。您可以通过指定索引来显示数据，该索引将在每个下一个按钮上添加。

。

reference:any;
currentIndexToShow:number = 0;
nextButtonClick() {
   this.currentIndexToShow++;
   this.reference = content[currentIndexToShow];
}
<div> {{reference?.item}} </div>
<div> {{reference?.image}} </div>
<div> {{reference?.field2}} </div>