Angular2 +使用NgFor創建具有相同內容的mat-tab

Question

我正在使用ngFor根據帶有mat-tab材料的列表創建一些標簽。

但是，我只想擁有一個獨特的內容。 實際上，內容是一個圖形，只有數據發生了變化。 因此，當我單擊選項卡之一時，它將調用函數onTabChanged（） ，並且變量數據將在<nvd3>中更新。

這不能正常工作。 因為它創建了nvd3的三倍。

實際上，我希望選項卡像按鈕一樣。 因為我嘗試了一些按鈕，但是我更喜歡標簽的設計。

<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)">
  <mat-tab label={{tab.type}} *ngFor="let tab of datasetList; let index = index">
    <div>
      <nvd3 #nvd3 [options]="chart" [data]="data"></nvd3>
    </div>
  </mat-tab>
</mat-tab-group>

Answer 1

我認為您應該使用mat-tab-nav-bar而不是mat-tab-group 。