我有多个标签 View ,每个标签 View 中都有一个组件渲染。这是代码:
<mat-tab-group>
<mat-tab *ngFor="let g of goals; index as i">
<ng-template mat-tab-label>{{g.name}}</ng-template>
<div class="row">
<app-summary [goal]="g"></app-summary>
</div>
<div class="row">
<mat-table #table [dataSource]="dataSource[i]">
## some table content here
</mat-table>
</div>
</mat-tab>
</mat-tab-group>
这里是 app-summary
看起来像:
<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
<div fxFlex="55">
<mat-card class="summary-card">
<mat-card-content>
<chart [options]="wealthOptions"></chart>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="25">
<mat-card class="summary-card">
<mat-card-content>
<chart [options]="pieProbOptions"></chart>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<chart>
包含 Highcharts View 。但是,图表仅适用于第一个选项卡。 component
为每个选项卡加载和呈现。
这里是否缺少某些东西或需要以某种方式完成?
最佳答案
这是因为,当你初始化highcharts时,除了第一个tab,其他的都不在DOM中,所以不能初始化。
您将不得不监听一些选项卡更改事件,然后在选项卡呈现后重新初始化 highcharts。
关于javascript - highcharts 未在选项卡中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49845401/