时间戳

首页 > 解决方案 > 来自表达式的Angular 6错误调用函数

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

问题描述

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

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

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

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

getCarName() {
  return this.carName;
}

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

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

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

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

谢谢！！

标签： javascriptangulartypescript

解决方案

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>

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

推荐阅读