Angular 使用*ngIf按索引切换类

我希望通过使用

*ngIf

，切换显示一个有

*ngFor

的类，这样我就可以切换带有索引的

div

。我的代码是这样的：

<div *ngFor="let scenario of scenarios; let j = index">
  <div (click)="toggle(j)" class="edit-btn">
    <p>Edit</p>
  </div>
  <div *ngIf="show" class="input-wrapper">
      <div class="spectrum-inputs" *ngFor="let s of scenario.time; let i = index;trackBy:trackByIndex;">
         <input ...>
      </div>
  </div>
</div>

---

我正在将索引

j

传递给

（单击）=“切换（j）”

按钮

您应该使用

场景的长度初始化数组。length

存储每个场景的状态

div

如-

public show = new Array(scenarios.length).fill(false);

然后你就可以这样做了

toggle(index) {
  this.show[index] = !this.show[index];
}

并在HTML中与

*ngIf=“show[j]”

一起使用，它读取特定场景的状态

div

，如-

<div *ngFor="let scenario of scenarios; let j = index">
  <div (click)="toggle(j)" class="edit-btn">
    <p>Edit</p>
  </div>
  <div *ngIf="show[j]" class="input-wrapper">
      <div class="spectrum-inputs" *ngFor="let s of scenario.time; let i = index;trackBy:trackByIndex;">
         <input ...>
      </div>
  </div>
</div>

编辑

---

现在，您的

show

变量包含一个布尔值

，因此我设法这样做：

<div *ngFor="let scenario of scenarios; let j = index">
  <div (click)="toggle(j)" class="edit-btn">
    <p>Edit</p>
  </div>
  <div *ngIf="show === j" class="input-wrapper">
      <div class="spectrum-inputs" *ngFor="let s of scenario.time; let i = index;trackBy:trackByIndex;">
         <input ...>
      </div>
  </div>
</div>

<div *ngFor="let scenario of scenarios; let j = index">
  <div (click)="toggle(j)" class="edit-btn">
    <p>Edit</p>
  </div>
  <div *ngIf="show === j" class="input-wrapper">
      <div class="spectrum-inputs" *ngFor="let s of scenario.time; let i = index;trackBy:trackByIndex;">
         <input ...>
      </div>
  </div>
</div>

public show: number;

    toggle(index) {
    if (this.show == index) {
      this.show = -1;
    }
    else {
      this.show = index;
    }
  }