錯誤：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更改檢測策略，因為它可以提高您的應用程序的性能。 以及使變更檢測更合乎邏輯