Angular mat-select用随机串设置唯一name属性触发NG0100错误问题咨询

Angular的变更检测机制要求，同一轮检测流程里，同一个模板绑定的表达式返回值必须保持前后一致，如果检测到表达式在两次校验间结果变化，就会抛出NG0100错误。
你现在的实现是把随机字符串生成方法直接绑在mat-select的name属性上，每次变更检测执行的时候，都会重新跑一遍这个随机方法，两次跑出来的5位随机串肯定不一样，正好对应报错提示里前后值从zAx5R变成rPFo6的现象。

• 彻底避免把结果不稳定、有副作用的方法直接绑定在模板属性上，提前生成稳定的唯一标识做绑定
  不要在模板里临时调用随机生成方法，在userEntitiesRoles数组每次更新的时机（初始赋值、动态增删条目、接口数据返回后），就给每个数组元素预先计算好专属的select name值，存在数组元素的字段里，模板直接读取这个固定字段值：

// 数组更新的统一处理逻辑
private syncUniqueNameForSelect(rawRoles: any[]) {
  this.userEntitiesRoles = rawRoles.map(item => ({
    ...item,
    selectFieldName: `role_select_${this.generateRandomStr(5)}` // 仅在数据更新时生成一次，后续读取值固定
  }))
}

模板绑定直接读预存的字段：

<mat-select 
  [name]="item.selectFieldName"
  [(ngModel)]="item.role"
>
  <mat-option *ngFor="let role of roleOptions" [value]="role.value">
    {{ role.label }}
  </mat-option>
</mat-select>

• 优先用业务侧已有的唯一主键拼接name，减少随机值的使用成本
  如果userEntitiesRoles数组的每个条目本身带有可唯一标识的业务字段（比如实体id、绑定关系id），直接用这个字段拼接name值即可，完全不需要自己实现随机生成逻辑，比如[name]="'role_select_' + item.entityRelationId"，这类固定值不管跑多少轮变更检测，返回结果都不会变化，从根源上避免表达式不一致的问题。
• 临时兜底方案（不建议长期使用）
  如果短期没法调整数组预处理逻辑，可以把随机值的生成逻辑挪到组件类的成员变量上，在组件初始化阶段一次性生成所有对应的name值，模板仅做读取，不在模板侧调用随机生成方法。

• 模板绑定里尽量不要直接调用返回值不稳定的逻辑：包括随机数生成、实时时间获取、无缓存的动态计算逻辑，这类逻辑每轮变更检测执行都会得到不同结果，是触发NG0100错误的最高发场景。

内容的提问来源于stack exchange，提问作者lucia