angular - 画布图表未在 Angular 中生成

Question

我正在构建一个使用ng2- 图表和 Angular的应用程序。在此我使用 Canvas 标签来显示折线图。有多个属性要显示在画布中，例如电池电压、水位等。默认情况下，我正在显示水位，但是当我选择Battery Voltage时，图表不会显示。

以下是代码文件，以便更好地理解

图.component.html

  <div class="filterDate">
    <mat-form-field appearance="fill">
      <mat-label>{{'Choose a date'|translate}}</mat-label>
      <input id="selectedDateInput" [disabled]="isSensor" [(ngModel)]="this.dateFilter.fromDateTime" matInput
             #selectedDateInput [matDatepicker]="myDatepicker" (dateChange)="onChange(selectedDateInput.value)">
      <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #myDatepicker></mat-datepicker>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>{{'Select property'|translate}}</mat-label>
      <mat-select [disabled]="isSensor" #sensorProperty name="sensorProperty" [(ngModel)]="comparePoint.sensorProperty">
        <mat-option *ngFor='let property of sensorProperties' (click)="handlePropertySelectionCustom(property.name)"
                    [value]="property.id">
          {{property.name|translate}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

      <div *ngIf="barChartData.length>0" class="chart" style="display: block">
        <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="barChartColors"
                [legend]="barChartLegend" [options]="barChartOptions" chartType='line' style="overflow-x: auto;">
        </canvas>
      </div>
      <div *ngIf="barChartData.length==0" class="chart" style="display: block;text-align: center;">
        <p>{{'No data'|translate}}</p>
      </div>

图.component.ts

  sensorProperties: any = [
    {name: 'Battery Voltage', id: 1},
    {name: 'Freshwater Electrical Conductivity', id: 2},
    {name: 'Water Quantity', id: 3},
    {name: 'Water Level', id: 4},
    {name: 'Turbidity', id: 5},
  ];

  handlePropertySelectionCustom(propertyName: any): any {
    debugger;
    this.barChartLabels = [];
    this.barChartData = [];
    console.log(propertyName);
    console.log(this.currentSensorId);
    this.todoService.getAllByMainSensorId(this.currentSensorId, this.customDate).subscribe((response: any) => {
      console.log(response.waterFlowResponse);
      if(propertyName === 'Battery Voltage'){
        for (let i = 0 ; i < response.waterFlowResponse.length; i++) {
          this.barChartLabels.push(response.waterFlowResponse[i].dateTime);
          this.barChartData.push(response.waterFlowResponse[i].batteryVoltage);
        }
      }
      if(propertyName === 'Freshwater Electrical Conductivity'){
        for (let i = 0 ; i < response.waterFlowResponse.length; i++) {
          this.barChartLabels.push(response.waterFlowResponse[i].dateTime);
          this.barChartData.push(response.waterFlowResponse[i].freshwaterConductivity);
        }
      }
      if(propertyName === 'Water Level'){
        for (let i = 0 ; i < response.waterFlowResponse.length; i++) {
          this.barChartLabels.push(response.waterFlowResponse[i].dateTime);
          this.barChartData.push(response.waterFlowResponse[i].waterLevel);
        }
      }
      if(propertyName === 'Water Quantity'){
        for (let i = 0 ; i < response.waterFlowResponse.length; i++) {
          this.barChartLabels.push(response.waterFlowResponse[i].dateTime);
          this.barChartData.push(response.waterFlowResponse[i].waterQuantity);
        }
      }
      if(propertyName === 'Turbidity'){
        for (let i = 0 ; i < response.waterFlowResponse.length; i++) {
          this.barChartLabels.push(response.waterFlowResponse[i].dateTime);
          this.barChartData.push(response.waterFlowResponse[i].turbidity);
        }
      }

    });
  }

问题：问题是虽然数据在API 调用中被推送到 barChartLables和barChartData数组中，但在外部它变空了。 请问有什么解决办法吗？

标签： angularng2-charts