ng2-диаграмма обновляется только когда курсор находится в определенной позиции - PullRequest
Новая
       11

ng2-диаграмма обновляется только когда курсор находится в определенной позиции

0 голосов
/ 17 мая 2018

В моем веб-приложении angular2 есть страница, где я отображаю список элементов. Рядом с этим находится боковое меню.
Когда выбран один из элементов в списке, я показываю дополнительный подробный вид, который включает в себя радиолокационную диаграмму (используя библиотеку ng2-charts ), которая привязывается к массиву данных. Поскольку я выбираю данные, которые хочу отобразить из базы данных, массив инициализируется с использованием некоторых данных по умолчанию, а затем обновляется с использованием наблюдаемой: 

public spiderChartData:any = [
    {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
    fillColor: "rgba(220,220,220,0.2)",
   data: [30,30,30,30,30]}
];
constructor(private fs : FirebaseService) { }
ngAfterViewInit() {
    this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
        this.ratings = res.map(x=>x);
        console.log("data received");
        this.spiderChartData = [
            {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
            fillColor: "rgba(220,220,220,0.2)",
            data: this.ratings;
    });

}

Из журнала видно, что необходимые данные получены практически мгновенно. Однако по какой-то причине диаграмма не перерисовывается, пока я не наведу курсор на меню боковой панели; тогда график обновляется мгновенно.
Я бы хотел, чтобы диаграмма обновлялась сразу после получения новых данных.
Я пытался обновить диаграмму вручную или даже уничтожить и перерисовать ее, но до сих пор эта проблема не устранена.

дополнительная информация

релевантный html: 

<canvas baseChart
    [datasets]="spiderChartData"
    [labels]="spiderChartLabels"
    [chartType]="spiderChartType"
    [options]="spiderChartOptions"
    [colors]="spiderChartColours"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)">
</canvas>
  • Я в значительной степени скопировал весь код для диаграммы из другого, гораздо более простого, моего проекта, который был просто одной страницей с этой диаграммой. Там автоматическое обновление работало без проблем.
  • У меня проблемы с выделением минимального рабочего примера для демонстрации, но я надеюсь, что кто-нибудь сможет мне помочь в любом случае.

1 Ответ

0 голосов
/ 17 мая 2018

Это происходит потому, что ваш массив spiderChartData остается таким же, как в Обнаружении угловых изменений.Я имею в виду, что ссылка не меняет только свойство data внутри.

Angular в отличие от AngularJS не изменяет проверку на изменение значения;он сравнивает переменные, используя === вместо ==.

Так что для Angular для запуска Change Detection используйте: 

    public spiderChartData:any = []; //<--- initialize as empty array to begin with

    constructor(private fs : FirebaseService) { }
    ngAfterViewInit() {
        this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
            this.ratings = res.map(x=>x);
            console.log("data received");
            this.spiderChartData = [
                {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
                fillColor: "rgba(220,220,220,0.2)",
                data: this.ratings;
        });
   }

ИЛИ

Если вы не хотитеинициализируйте массив как пустой, затем вам нужно вызвать ChangeDetectorRef.detectChange() в ngAfterViewInit, поэтому явно сообщите Angular запустить цикл обнаружения изменений. 

public spiderChartData:any = [
    {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
    fillColor: "rgba(220,220,220,0.2)",
   data: [30,30,30,30,30]}
];

 constructor(private fs : FirebaseService
      private _cdRef : ChangeDetectorRef//<--- inject ChangeDetectorRef
      ) { }

    ngAfterViewInit() {
        this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
            this.ratings = res.map(x=>x);
            console.log("data received");
            this.spiderChartData = [
                {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
                fillColor: "rgba(220,220,220,0.2)",
                data: this.ratings;
        });
    this._cdRef.detectChanges(); // <-- tell angular to run cd for this components and it's siblings
       }
...