Angular 5 不会渲染组件，直到单击或悬停在任何地方

Question

我有这个问题，现在让我头疼，我无法弄清楚是什么问题。我有一个名为 device-form 的表单，它是使用路由从仪表板调用的。设备表单有 4 个标签（角材料），第二个必须显示一个 Highchart 组件，当您选择该标签时，会出现容器而不是图表....如果您等待，图表将永远不会出现，但是如果你点击任何地方，图表就会出现，如果你用鼠标悬停某个项目，或者如果你调整屏幕大小！！

App-chart-box.component.html：

<mat-card fxFlex="100%" fxLayout="row">
<mat-card-title></mat-card-title>
<mat-card-content>
    <mat-tab-group class="form-wizard tab-group">
        <mat-tab *ngFor="let chart of charts; let i = index">
            <ng-template mat-tab-label>
                {{ chart.sensorTypeName }}
            </ng-template>
            <div class="tab-content">
                <vr-chart class="card-img-top" [title]="chart.sensorTypeName" [yTitle]="chart.sensorTypeUnit" type="spline" [series]="chart.series"
                    [period]="period" [minThreshold]="minThreshold" [maxThreshold]="maxThreshold"></vr-chart>
            </div>
        </mat-tab>
    </mat-tab-group>
</mat-card-content>
<mat-card-actions>
    <small class="footer">Last updated: {{ dateUpdated }}</small>
</mat-card-actions>

设备form.component.html：

 <mat-tab>
      <ng-template mat-tab-label>
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
          <span>Statistics</span>
        </div>
      </ng-template>
      <div fxFlex="100%" class="shipping-address" fxLayout="column">
        <mat-form-field class="select-period">
          <mat-select placeholder="{{ 'DEVICE_FORM.PERIOD' | translate }}" [(ngModel)]="filterPeriodSelected" (change)="loadDeviceChart()">
            <mat-option *ngFor="let period of chartPeriods" [value]="period.value">
              {{ period.label | translate }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <!-- <div *ngIf="deviceCharts.length == 0" class="alert bg-primary alert-dismissible fade show" role="alert">
          <strong class="ng-tns-c6-44"> {{'MESSAGE.NO_DATA_TO_SHOW' | translate}}</strong>
        </div> -->
        <vr-chart-box *ngIf="deviceCharts" class="fix-width" [charts]="deviceCharts" [period]="filterPeriodSelected"></vr-chart-box>
      </div>
    </mat-tab>

当你看到 app-chart-box 组件被渲染时，实际上我们总是可以看到页脚被加载，总是，但是图表的主体直到点击或悬停时才会出现。

更新：实际上，当您更改主仪表板页面中的下拉列表时，表格中充满了来自 API 的数据，我遇到了同样的问题，表格组件始终在侦听 .onCompanyChange.subscribe，读取所有数据，但是直到您进行单击或悬停或任何事件后，表格才会显示......这是代码：表格组件：

export class CompanyHistoryComponent implements OnInit {
  @ViewChild('tableInput') tableInput: ElementRef;
  @Input() companyId = 0;
  private rows: Observable<Array<any>>;
  // public rows: any[] = [];

  resultsLength: number;
  dataSource: ListDataSource<any> | null;
  database: ListDatabase<any>;
  tableHover = true;
  tableStriped = true;
  tableCondensed = true;
  tableBordered = true;

  constructor(
    public sensorService: SensorService,
    public dashboardService: DashboardService,
    private cd: ChangeDetectorRef,
  ) {
    // Selected company changed
    this.dashboardService.onCompanyChange.subscribe(
      (id: number) => {
        this.companyId = id;
        this.loadSensorHistory();
        cd.detectChanges();
      });
  }

  public loadSensorHistory() {
    const sDate: Number = moment().subtract(30, 'day').unix()
    const eDate: Number = moment().unix();

    this.sensorService.getSensorDataHistory(this.companyId, sDate, eDate, null, null, 1, 10).subscribe(response => {
      if (response.statusCode !== 200 || !response.data) {
        // this.toastrService.error('MESSAGE.NO_DATA', 'SENSOR_FORM_LIST.TITLE', { positionClass: 'toast-top-right', closeButton: true });
      } else {
        this.rows = response.data.list;
      }
    });
  }
  ngOnInit() {

  }

正如你这次看到的，我添加了 detectChanges() 没有任何结果:( 如果你有想法，请告诉我。这是表格的 HTML ：

<table class="table" [class.table-hover]="tableHover" [class.table-striped]="tableStriped" [class.table-condensed]="tableCondensed"
  [class.table-bordered]="tableBordered">
  <thead>
    <tr>
      <th>Date</th>
      <th>Device</th>
      <th>Sensor</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows" [class.row-failed]="row.failed > 0">
      <td>{{ row.data_createdDate | date:'MM/dd/yyyy HH:mm:ss a Z' }}</td>
      <td>
        <a href="">{{ row.deviceMAC }}</a>
      </td>
      <td>
        <a href="">{{ row.sensorNumber }} - {{ row.sensorName }}</a>
      </td>
      <td>{{ row.value }}</td>
    </tr>
  </tbody>
</table>

Answer 1

您应该调用 ChangeDetectorRef detectChanges()