使用 Next 按钮使用 ngFor 循环遍历数组

【问题标题】：Looping Through Array with ngFor Using Next Button使用 Next 按钮使用 ngFor 循环遍历数组
【发布时间】：2018-05-11 10:19:12
【问题描述】：

Ionic 3 有点新 - 我希望在使用 ngFor 时循环遍历一个数组。我使用 slice 方法一次显示数组中的一项。当我单击“下一步”按钮时，我希望显示数组中的下一项。

<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 是否是最好的方法，或者是否有更好的选择。谢谢！

【问题讨论】：

ts 按钮的代码？
我目前没有任何代码 - Angular/ionic 的新手 - 不确定是否可以使用 ng 指令之一循环遍历它

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案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>

【讨论】：

我的语法有误。同样在 div 的内部 - 它是假设是 reference[0].item 还是我们想要拥有？谢谢@saj
存在一些语法问题，现已更正。符号“？”是一个空运算符。因此，如果当我们调用 referenceece?.item 时引用为 null，它不会抛出异常，结果将返回为 null。在参考属性中，它从索引中的内容分配数据，因此无需参考[0]。
嗯 - 它无法识别“？”旁边的参考。除非我输入“this”，否则它也会给我一个“未定义”的错误。在 CurrentIndexToShow 和参考之前。