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 。