我如何在 Angular 上一次展示 NgFor 中的项目答案

【问题标题】：How can i present items from an NgFor one step at a time on Angular我如何在 Angular 上一次展示 NgFor 中的项目
【发布时间】：2022-06-28 02:02:32
【问题描述】：

我有一个 ngfor，有 3 个项目，我想分步呈现它们，就像表单中的问题一样。例如，一旦回答了第一步，就只显示表单的第二个问题。

我也有一个 stackblitz 代码作为参考。 https://stackblitz.com/edit/angular-ivy-oauzgh?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： angular typescript ngfor

【解决方案1】：

不确定 ngFor 是不是最好的方法，反正你可以添加

<tr *ngFor="let hero of heroes; let i = index">
   <td *ngIf="i > currentIndex">{{hero.name}}</td>
   User do something and you increase the currentIndex
</tr>

在ts中你只需要声明currentIndex并在初始化时将其设置为0，并在Do something块中增加一个html调用的索引的方法

【讨论】：

怎么样？如果我在单击时进行增量，它将不断向属性添加数字，因此如果我单击第一项 3 项，它将显示 3 个步骤。
我修改了你stackblitz：stackblitz.com/edit/angular-ivy-qsmp13?file=src/app/…
是的，这就是我在这里所做的，但这很难，第一个框应该只显示第二个，即使点击了两次，第二个显示第三个。
只有在用户点击最后一个 div 时才增加索引，类似这样：stackblitz.com/edit/angular-ivy-qsmp13?file=src/app/…
对不起，我没有保存就创建了链接。这是：stackblitz.com/edit/angular-ivy-qsmp13?file=src/app/…