Angular 5：使用patchValue后如何让单选按钮被选中？

这个问题的核心在于Angular单选按钮对对象类型值的匹配逻辑——它默认是按对象引用相等来判断选中状态的，而不是对象的属性值。

你当前的代码里，回填时用new Answer(99, 'YES')创建了全新的Answer实例，但模板循环渲染的answers数组里的Answer对象是另一个引用。即使两个对象的id和name完全一样，Angular用===比较时会认为它们不相等，所以单选按钮不会被选中。

下面提供两种可行的解决方案：

方案一：复用已有对象引用（推荐，性能更优） #

直接从answers数组中找到对应Answer对象的引用，再用来回填表单，这样和模板里的[value]引用完全一致，Angular就能正确匹配选中状态：

patchValues() {
  console.log('Form value before: ' + JSON.stringify(this.form.value));
  const value = {};
  // 从answers数组中查找匹配的对象，而不是新建实例
  value[1] = this.answers.find(ans => ans.id === 99);
  value[2] = this.answers.find(ans => ans.id === 100);
  console.log('Patching values: ' + JSON.stringify(value));
  this.form.patchValue(value);
  console.log('Form value after: ' + JSON.stringify(this.form.value));
}

方案二：自定义值比较逻辑（适合无法复用引用的场景） #

如果你的回填数据来自后端（比如是JSON序列化后重新解析的对象，和前端Answer实例不是同一个引用），可以通过compareWith指令告诉Angular如何判断两个Answer对象相等：

步骤1：在组件中定义比较函数 #

// 自定义比较逻辑，根据Answer的唯一标识（比如id）判断相等性
compareAnswer(a: Answer, b: Answer): boolean {
  // 处理null/undefined的情况，避免报错
  return a && b ? a.id === b.id : a === b;
}

步骤2：在模板中添加compareWith绑定 #

<div class="radio" *ngFor="let answer of answers">
  <label class="radio">
    <input type="radio" 
           [formControlName]="question.id" 
           [value]="answer"
           [compareWith]="compareAnswer"/>&nbsp;{{answer.name}}
  </label>
</div>

这样即使是不同引用的Answer对象，只要id相同，Angular就会认为它们相等，单选按钮就能正确被选中。

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