我想一次只显示第一个 div 并隐藏所有其他 div

Question

我想一次只显示第一个div并隐藏所有其他div。

组件模板：

@Component({
  selector: 'question',
  template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions">
             <div class="section-head  text-center">{{question.heading}}</div>
             <div class="section-desc  text-center">{question.description}}</div>
             </div>
<div class="action">
   <div class="col-md-12 text-center">
       <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button>
       <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button>
   </div>
</div>`
})

类：

export class Question{
    id: number;
    heading: string;
    description: string;
    field: string;
    isOn = false;
    toggle(newState) {
        this.isOn = newState;
    }
}

Answer 1

不确定这是否是你想要的。

我为索引添加了一个 i 变量，然后在当前索引不等于变量 showIdx 时将 hidden 设置为 true。在按钮单击上，我递增showIdx变量：

@Component({
  selector: 'question',
  template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions let i=index" [hidden]="i !== showIdx">
             <div class="section-head  text-center">{{question.heading}}</div>
             <div class="section-desc  text-center">{question.description}}</div>
             </div>
<div class="action">
   <div class="col-md-12 text-center">
       <button type="button" (click)="showIdx++" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button>
       <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button>
   </div>
</div>`
})

export class Question{
    showIdx = 0;
    id: number;
    heading: string;
    description: string;
    field: string;
    isOn = false;
    toggle(newState) {
        this.isOn = newState;
    }
}

Answer 2

您需要为 isOn 定义一个对象而不是布尔值。下面是一个示例：

isOn: {}
toggle(question) {
  Object.keys(isOn).forEach(key => {
    if (key != question.id) {
      isOn[question.id] = false;
    }
  });
  isOn[question.id] = !isOn[question.id];
}

并在模板中：

template: `
  <div class="slide-{{question.id}}"
       [ngClass]="{hide: isOn[question.id]}" 
       *ngFor="let question of questions">
    <div class="section-head  text-center">{{question.heading}}</div>
    <div class="section-desc  text-center">{question.description}}</div>
    <div class="action">
      <div class="col-md-12 text-center">
      <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button>
      <button (click)="toggle(question)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button>
    </div>
  </div>
</div>
`