Question

我的页面上有5个div。加载表单后，所有5个div都会填充一些数据。但是，当用户执行任何操作或单击cross（X）登录时，我一次只能显示3 div 任何div，我们都必须显示下一个div。

需要弄清楚如何仅显示3条记录，即仅显示3个div吗？一次最多可显示3个div

    //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

动态显示/隐藏Divs

1 个答案: