Угловые + ChartJS + NgOnIt проблемы - PullRequest
Новая
       5

Угловые + ChartJS + NgOnIt проблемы

0 голосов
/ 24 января 2019

Я пытаюсь реорганизовать стандартную часть CoreUI chartJS для моего проекта Angular, чтобы заполнить диаграмму chartJS, используя данные из http get. Итак, у меня есть:

Объявленные переменные: 

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;
    });

  }

... так что в этом случае диаграмма в моем dashboard.component.html пуста. Но если я ...

... добавить в мой html: 

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

... и в моем .ts-файле: 

 clickEvent() {
    this.mainChartData1 = output;
  }

работает нормально, если нажать кнопку ОК. Итак, я понимаю, что моя проблема заключается в асинхронном поведении функции подписки , но я не могу понять, как изменить свой код. И я не могу понять, почему обновление this.mainChartData1 в ngOnInit не обновляет 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>

    ....
...