错误：ExpressionChangedAfterItHasBeenCheckedError可变角度？

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();
  }

我收到此错误消息：

错误错误：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变更检测策略，因为它可以提高应用程序的性能。以及使变更检测更加合理