在每一步使用 ngFor 的迭代根据索引答案

【问题标题】：on every step use iteration of ngFor as per index在每一步使用 ngFor 的迭代根据索引
【发布时间】：2020-04-15 05:53:54
【问题描述】：

我有一个对象数组，我在上面运行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 等等。

你有什么想法吗？

【问题讨论】：

将一个对象添加到您的组件中以跟踪所选英雄。然后，相应地在点击时更新此英雄（如果我正确理解了您的问题）。
我需要一次在 heros 中显示一个完整的对象，并且每次点击它都应该迭代到下一个对象

标签： angular typescript ngfor

【解决方案1】：

你可以用一个变量来保存当前选中的对象。

在html中

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

最初在ts文件中，可以有

selectedObj = { };

计数 = 0;

this.selectedObj = HEROS[count];

每次点击下一个按钮时

下一个()

{

this.count ++;

this.selectedObj = HEROS[count];

}

【讨论】：