Question

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

应用-图表-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组件被渲染时，实际上我们总是可以看到页脚被加载，但是图表的主体在点击或悬停o之前不会出现。

更新：实际上，当你在主仪表板页面中更改下拉列表时，我遇到了一个与来自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（）

Angular 5在点击或悬停在任何地方之前不会渲染组件

1 个答案: