我從子組件（timerrenderer）得到 ExpressionChangedAfterItHasBeenCheckedError，Angular 7

Question

我從我的子組件中收到 ExpressionChangedAfterItHasBeenCheckedError 錯誤。 我嘗試在 ngOnchanges 中添加 detectChanges() 方法，但沒有成功。 我是 angular 的新手。 我也嘗試了其他問題的解決方案，但對我不起作用。

      ngOnInit() {
        if (this.IsInGrid === false) {
          this.duration = this.Duration * 60 * 60 * 1000;
          this.startDate = this.StartDate;
          this.timerText();
          this.init(null);
        }
      }
      ngOnChanges() {
        this.changeDetector.detectChanges();
      }
      ngAfterViewChecked() {
        this.changeDetector.detectChanges();
      }
    
      agInit(params: any): void {
        this.params = params;
        this.init(params);
      }
    
      init(params: any) {
    
      }
    
      timerText(): string {
        if (this.StartDate == null) {
          return "";
        }
        this.elapsed = new Date().getTime() - this.StartDate.getTime();
        if (this.elapsed > this.duration) {
          this.isPassed = true;
        }
    
        return this.msToTime(this.elapsed);
      }
    
      msToTime(ms, delim = ' : ') {
        const showWith0 = value => (value < 10 ? `0${value}` : value);
        const days = Math.floor((ms / (1000.0 * 60 * 60 * 24)));
        const hours = showWith0(Math.floor((ms / (1000.0 * 60 * 60)) % 24));
        const minutes = showWith0(Math.floor((ms / (1000.0 * 60)) % 60));
    
        if (days > 0)
          return `${days}d ${hours}h ${minutes}m`;
        if (hours > 0)
          return `${hours}h ${minutes}m`;
        return `${minutes} minutes`;
      }
    
      refresh(params: any): boolean {
        return true;
      }
    }

Answer 1

調試這些錯誤有點黑藝術。 雖然我不能評論你的代碼，但我可以給你一些幫助我擺脫它們的指示。

據我所知，在設置和檢查初始值后更新屬性時會顯示此消息。

首先，使用 Angular 生命周期鈎子https://angular.io/guide/lifecycle-hooks設置這些值，特別是 ngAfterViewInit()。 使用 ngOnChanges() 可能會降低性能。

ExpressionChangedAfterItHasBeenCheckedError 解釋

Answer 2

我將 changeDetection: ChangeDetectionStrategy.OnPush 添加到我的組件中，它似乎對我有用。 我為我的解決方案找到了正確的解釋。

來源：

https://medium.com/@bencabanes/angular-change-detection-strategy-an-introduction-819aaa7204e7