Показать / Скрыть Divs динамически в угловых

Question

У меня есть 5 дел на моей странице.Когда моя форма загружена, все 5 div заполняются некоторыми данными.Тем не менее, я должен отображать только 3 деления за раз, и когда пользователь предпринимает какие-либо действия или нажимает на крестик (X) на любом делении, мы должны отображать следующее деление.

Необходимо выяснитькак отобразить только 3 записи, т.е. только 3 div?За один раз может отображаться максимум 3 деления

    //Model
export class Bird{
 id: number;
 name: string;

}

This is the sample collection that we need to display in DIV on form
arrBirds: Birds [] = [
    { id:1, name: 'Bells Sparrow' },
    { id:2, name: 'Mourning Dove'},
    { id:3, name: 'Bald Eagle' },
    { id:4, name: 'Sparrow' }
    { id:5, name: 'Parrot' }
  ];


//html
This is how, I am displaying the data in DIV on form.
<div *ngFor='let bird of arrBirds' (click)="onSelection(bird)">
    <div>{{ bird.name }}</div>
</div>

// this code is to take any action on what user has selected in div
<div *ngIf="selectedBird">
 {{selectedBird.id}} {{selectedBird.name}}
</div>

// 
onSelection(userSelectedBird: Bird}{
 this.selectedBird = userSelectedBird;
}

Answer 1

Вы должны определить массив страниц с «активным» состоянием, т.е.

const pages = [{
  id: 1,
  name: 'page1'
  active: true
}, {
  id: 2,
  name: 'page2'
  active: true
}, {
  id: 3,
  name: 'page3'
  active: true
}, {
  id: 4,
  name: 'page4'
  active: false
}, {
  id: 5,
  name: 'page5'
  active: false
}]

На основе выбора вы можете установить активный флаг true / false.Вы можете использовать активное свойство с * ngIf в файле шаблона.

https://stackblitz.com/edit/angular-sxzrlp