在每个步骤上使用ngFor的迭代索引

Question

我有一个对象数组，并且我正在其上运行ngFor。我想为ngFor的每次迭代显示不同的视图。

const HEROES = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];

像Superman应该是默认视图，然后单击下一步时显示Batman，下一个将是BatGirl，依此类推。

你有什么想法吗？

Answer 1

您可以使用一个变量保存当前选定的对象。

HTML中

`

<div>
    <span>{{selectedObj.name}}</span>
</div>

`

最初在ts文件中，您可以拥有

selectedObj = {};

count = 0;

this.selectedObj = HEROS [count];

每次单击下一个按钮时

next（）

{

this.count ++;

this.selectedObj = HEROS[count];

}