错误：ExpressionChangedAfterItHasBeenCheckedError 变量 Angular？答案

【问题标题】：Error: ExpressionChangedAfterItHasBeenCheckedError varaible Angular?错误：ExpressionChangedAfterItHasBeenCheckedError 变量 Angular？
【发布时间】：2020-08-20 17:16:06
【问题描述】：

我有以下模板元素：

  <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'.

【问题讨论】：

标签： angular

【解决方案1】：

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

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

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

【讨论】：

如果我在返回布尔值和模板的组件中有方法是：<div *ngIf="isVisibleField(field)">。这也是不好的做法吗？
@Mamkad：如果您使用默认 CD 策略，可以。每个 CD 循环也会触发函数isVisibleField()。
@Mamkad 是的，如果您从模板调用方法是不好的做法，这将触发额外的更改检测，并且您不知道它要重新渲染多少次
@Mamkad 实际上，从模板调用函数并不是完全不好的做法。如果该方法很小，并且没有副作用，则没有明显的性能差异。这是因为模板中的每个表达式都已经转换为函数，并且会增加模板的可读性。只要在一个检测周期内返回值不发生变化，一切都很好。
那么如何检查字段是否有另一个可见状态 ti 显示/隐藏？