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

Question

我想一次只显示第一个 div 并隐藏所有其他 div。并单击按钮需要显示第二个 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

您需要为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>
`

Answer 2

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

我为索引添加了一个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;
    }
}