javascript - 来自表达式的 Angular 6 错误调用函数

Question

我目前正在开发 Angular 6 应用程序。我尝试从表达式调用方法。不幸的是，它似乎不再起作用了。

这个例子很简单，看起来像我的car.component.html:

<div>Car Name: {{ getCarName() }} </div>

在我的组件代码 car.component.ts 中，我实现了类似这样的功能:

getCarName() {
  return this.carName;
}

实际上，每次我将鼠标悬停在组件 UI 上的另一个 div 上时，我都会更改属性 carName。

不幸的是，我收到以下错误:

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。以前的值...

你知道如何解决这个问题吗？

谢谢!!

Answer 1

ExpressionChangedAfterItHasBeenCheckedError 意味着，如果您以这种方式构建逻辑，则必须在组件内部手动检测更改:

import { Component, AfterViewChecked, ChangeDetectorRef } from '@angular/core';

/* Other stuff goes here */

export class PhoneVerifyComponent implements AfterViewChecked {
  constructor(private _changeDetectorRef: ChangeDetectorRef) { }

  ngAfterViewChecked() {
    /* This way the detector will run after every change */
    this._changeDetectorRef.detectChanges();
  }

  getCarName() {
    /* This way you run detector only on this function call */
    this._changeDetectorRef.detectChanges();
    return this.carName;
  }
}

您可以选择任何您喜欢的方式，在特定位置或每次更改后运行检测器。如果您的目标只是使用此方法解决问题，我建议在特定函数调用时运行它，但如果您有很多这样的情况 - 最好在 ngAfterViewChecked 中运行它。

但是

最短的方法是将这个函数执行的结果存储到类属性中，并简单地插入这个属性，而不是方法:

<div>Car Name: {{ carName }}</div>

无论如何，我们不知道您的目标以及您的实际项目中发生了什么，因此您必须根据您的情况选择更合适的方式。