Angular2+ 使用 NgFor 创建具有相同内容的 mat-tab答案

【问题标题】：Angular2+ Using NgFor to create mat-tab with the same contentAngular2+ 使用 NgFor 创建具有相同内容的 mat-tab
【发布时间】：2018-12-17 17:55:55
【问题描述】：

我正在使用 ngFor 根据带有 mat-tab 材料的列表创建一些选项卡。

但是，我只想拥有独特的内容。事实上，内容是一个图表，只有数据发生了变化。因此，当我单击其中一个选项卡时，它会调用函数 onTabChanged() 并且变量 data 会在中更新。

这不能正常工作。因为它创建了三倍的 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>

【问题讨论】：

在 3 个选项卡中，您只想要一个内容字段？我的理解正确吗？
是的，我想要 3 个标签（或更多），只有一个 div 而不是三个。

标签： angular typescript

【解决方案1】：

我认为你应该使用mat-tab-nav-bar 而不是mat-tab-group。

【讨论】：