高图未加载到选项卡中 [英] highcharts not loading in tabs

问题描述

我有多个选项卡视图，每个选项卡中都有一个组件呈现.这是该代码:

I have multiple tabs view with a component rendering in each one of them. Here is the code for that:

<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>包含高图视图.但是，这些图表仅可用于第一个选项卡.每个选项卡的component均已加载并呈现.

The <chart> contains highchart views. However, the charts are available only for the first tab. The component is loaded and rendered for each tab.

这里是否有某些遗漏或需要完成的事情?

Is there something missing here or needs to be done is certain way?

推荐答案

这是因为，当您初始化高位图表时，除第一个选项卡之外，其他项都不在DOM中，因此无法初始化.

It is because, when you initialize the highcharts, except first tab, others are not in DOM, and therefore are not available to be initialized.

您将不得不听一些制表符更改事件，然后在呈现制表符后重新初始化高位图.

You will have to listen for some tab-change event, and then reinitialize the highcharts after the tab is rendered.

这篇关于高图未加载到选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！