在 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