Разное представление компонента на каждой итерации ng

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'}
];

Как Супермен должен быть видом по умолчанию, чем когда я нажмите следующий бэтмен, должно быть показано следующее, будет бэтгёрл и т. д.

У вас есть идеи?

Answer 1

Вы можете отобразить индекс без использования ngFor, выполнив следующие действия.

1. Создание компонента просмотра по умолчанию для отображения имени
2. Создание компонента для отображения следующего имени и использование ngIf для скрыть / показать этот компонент.
3. Используйте переменную и итерируйте с ней.

Я создал небольшой прототип, который может объяснить шаги, упомянутые выше. https://stackblitz.com/edit/angular-for-loop