Question

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

示例非常简单，在我的 car.component.html 中看起来很像：

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

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

getCarName() {
  return this.carName;
}

实际上，每当我将鼠标悬停在组件用户界面上的另一个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中运行它。

<强> BUT

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

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

无论如何，我们不了解您的目标以及您的真实项目中发生的事情，因此您必须为您的案例选择更合适的方式。

表达式中的Angular 6错误调用函数

2 个答案: