javascript - 在单击或悬停在任何地方之前，Angular 5 不会渲染组件

Question

我遇到了这个问题，现在让我很头疼，我不知道是什么问题。 我有一个名为 device-form 的表单，它是使用路由从仪表板调用的。设备窗体内部有 4 个选项卡( Angular Material )，第二个必须显示 Highchart 组件，当您选择该选项卡时，容器会出现但不会出现图表....如果您等待，图表将永远不会显示，但是如果你点击图表出现的任何地方，如果你用鼠标悬停在某个项目上，或者如果你调整屏幕大小!!

应用图表框.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>

device-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()