子组件中的ExpressionChangedAfterItHasBeenCheckedError [英] ExpressionChangedAfterItHasBeenCheckedError in child component

问题描述

我有一个父组件，它每秒更新其数组myValue.在子组件中，我想创建一个图表，将这个数组用作数据，并在每次父组件更新时也进行更新.

I have a parent Component which updates a every second its array myValue. In a child component I want to create a chart which uses this array as data and updates also every time the parent updates.

运行此应用程序时出现此错误:

When I run this application I get this error:

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式具有 检查后更改.先前的值:"hidden:true".当前的 值:隐藏:假".

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'hidden: true'. Current value: 'hidden: false'.

这是我的父组件:

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements AfterContentInit, OnDestroy {

    private myValues: MyValue[];
    private alive: boolean;

    constructor(private valueService: ValueService) {
    this.alive = true;
    this.myValues = [];
  }

  ngAfterContentInit(): void {
    TimerObservable.create(0, 1000)
      .takeWhile(() => this.alive)
      .subscribe(() => {
        this.valueService.doSmth().subscribe(
          value => {
            this.myValues.push(value);
          }
        );
      });
  }
...

}

父模板如下:

<ul>
  <li *ngFor="let value of myValues">
    <p>{{value.name}}</p>
  </li>
</ul>

<app-value-chart [chartData] = myValues></app-value-chart>

这是我的子组件:

@Component({
  selector: 'app-value-chart',
  templateUrl: './value-chart.component.html',
  styleUrls: ['./value-chart.component.scss']
)}
export class ValueChartComponent implements AfterViewInit {
  @Input() chartData: MyValue[];

  chart: any;

  ngAfterViewInit(): void {
    this.createChart(); // creates chart with ChartJS
    const tmp: number[] = [];
    for (let i = 0; i < this.chartData.length; i++) {
      tmp.push(this.chartData[i].x);
    }
    this.chart.data.datasets[0].data = tmp;
    this.chart.update(0);
  }
...
}

子模板:

  <canvas id="canvas" responsive>{{ chart }}</canvas>

我该如何解决我的问题?

How can I solve my problem?

我使用Angular 6.

I use Angular 6.

推荐答案

您可以在本文.消除异常的一种技术是使用ChangeDetectorRef.detectChanges:

You can find detailed explanations about that exception in this article. One technique to eliminate the exception is to force change detection with ChangeDetectorRef.detectChanges:

export class ValueChartComponent implements AfterViewInit {

    constructor(private cd: ChangeDetectorRef) { }

    ngAfterViewInit(): void {
        ...
        this.cd.detectChanges();
    }

    ...
}

另一种技术是使用setTimeout异步运行处理程序代码:

An alternative technique is to run the handler code asynchronously with setTimeout:

export class ValueChartComponent implements AfterViewInit {

    ngAfterViewInit(): void {
        setTimeout(() => {
            ...
        });
    }

    ...
}

这篇关于子组件中的ExpressionChangedAfterItHasBeenCheckedError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！