Question

我正在尝试为我的Angular项目重构标准的CoreUI chartJS部分，以使用来自http get的数据填充chartJS图。所以，我有：

声明的变量：

public mainChartData1: Array<number> = [];

  public mainChartData: Array<any> = [
    {
      data: this.mainChartData1,
      label: 'Current'
    }
  ];

加载数据部分：

ngOnInit() {

    this.httpService.getData(this.localJson).subscribe(data => {
    const output = this.users.map(user => user.age);
    this.mainChartData1 = output;
    });

  }

...所以在这种情况下这种情况在我的仪表板中。component.html是空的。但是，如果我...

...添加到我的html中：

<button (click)="clickEvent()" >OK</button>

...并在我的.ts文件中：

 clickEvent() {
    this.mainChartData1 = output;
  }

如果我按“确定”按钮，它将正常工作。因此，我不理解我的问题是 subscribe function 的异步行为，但是我不明白如何更改代码。而且我不明白为什么在ngOnInit中更新this.mainChartData1不会自动更新mainChartData ...（（（（

请帮助！

PS：我的HTML：

<div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-sm-5">
          <h4 class="card-title mb-0">Traffic {{mainChartData5}}</h4>
            <button (click)="clickEvent()" >OK</button>
          <div class="small text-muted">November 2017</div>
        </div><!--/.col-->
      </div><!--/.row-->
      <div class="chart-wrapper" style="height:300px;margin-top:40px;">
        <canvas baseChart class="chart"
        [datasets]="mainChartData"
        [labels]="mainChartLabels"
        [options]="mainChartOptions"
        [colors]="mainChartColours"
        [legend]="mainChartLegend"
        [chartType]="mainChartType"></canvas>
      </div>
    </div>

    ....

Angular + ChartJS + NgOnIt问题

0 个答案: