错误：ExpressionChangedAfterItHasBeenCheckedError 变量 Angular？

Question

我有以下模板元素：

  <input
   class="form-check-input"
   type="radio"
   name="radio_{{ id }}"
   id="{{ id }}">

组件是：

  import * as uuid from 'uuid';
  public get id(): number {
       return uuid.v4();
  }

我收到此错误消息：

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。 以前的值：'103cb048-c966-4b76-b795-31dd2234204c'。 当前值：

该组件具有默认策略。

'a04eba4a-06b6-400b-af6c-e9afe3040919'。

Answer 1

在每个更改检测周期中，它都会调用id() getter，从而生成一个新的 id。 这很可能是不正确的，因为它还会导致输入中的id和name属性不同。 我想你正在寻找这个：

import * as uuid from 'uuid';
  
public id: string = uuid.v4();

但是，我可以建议您使用OnPush更改检测策略，因为它可以提高您的应用程序的性能。 以及使变更检测更合乎逻辑