在 Angular 中使用 *ngFor 和 *ngIf 根据索引值切换 div

Question

我有两个具有基于索引值的内容的 div，有没有办法在使用 *ngIf 传入索引参数的 div 之间切换？ 但是我目前的方法不起作用，但我知道为什么，因为我使用的是 boolean 值true and false的切换。

到目前为止，我已经尝试过：

<div *ngFor="let tab of tabComponents; let i = index;">
   <button
      class="btn btn-secondary mr-2 btn-sm"
      (click)="tab1Click(i)"
      >Tab1</button>
   <button
      class="btn btn-secondary mr-2 btn-sm"
      (click)="tab2Click(i)"
      >Tab2</button>
   <div *ngIf="tab1[i]">Content</div>
   <div *ngIf="tab2[i]">Content</div>
</div>

ts.文件

public tab1 = true;
public tab2 = false;

public tab1Click(i) {
  alert(i);
  public tab1 = true;
  public tab2 = false;
}

public tab2Click(i) {
  alert(i);
  public tab1 = false;
  public tab2 = true;
}

我知道这不起作用，因为 *ngIf 基于 boolean 值或真假，因此您似乎无法为其分配索引，据说有一种方法可以基于指数值。

Answer 1

它不起作用的原因是因为您的变量的类型是boolean （ tab1=true ），但是您试图访问它们，就像它们是数组tab1[i]

根据所需的行为，您可以使tab1和tab2 boolean arrays：

  public tab1: boolean[] = [];
  public tab2: boolean[] = [];

  public tab1Click(i: number) {
    this.tab1[i] = true;
    this.tab2[i] = false;
  }

  public tab2Click(i: number) {
    this.tab1[i] = false;
    this.tab2[i] = true;
  }

这可能会让你接近你想要的行为。

这是一个有效的StackBlitz