每次 ngFor 迭代都有不同的组件视图答案

【问题标题】：Different view of component on every ngFor iteration每次 ngFor 迭代都有不同的组件视图
【发布时间】：2020-07-28 00:20:18
【问题描述】：

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

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

像超人一样应该是默认视图，而不是当我单击下一个蝙蝠侠时应该显示下一个将是 batgirl 等等。

你有什么想法吗？

【问题讨论】：

欢迎来到 SO。请分享您到目前为止所做的尝试，以及您卡在哪里。

标签： angular6 ngfor

【解决方案1】：

您可以按照以下步骤在不使用 ngFor 的情况下显示索引。

创建默认视图组件以显示名称
创建组件以显示下一个名称并使用 ngIf 隐藏/显示该组件。
使用变量并对其进行迭代。

我创建了一个可以解释上述步骤的小型原型。 https://stackblitz.com/edit/angular-for-loop

【讨论】：