Angular 5中单选按钮selected值模型更新但视图未同步问题

我来帮你排查这个问题，结合你给出的代码，大概率是变更检测没有触发或者自定义组件没有正确响应输入属性变化导致的，咱们一步步来解决：

1. 检查自定义组件surf-radiobutton的输入属性处理 #

自定义组件如果没正确响应selected输入属性的变化，视图肯定不会跟着更新，你需要从这两方面确认：

步骤1：确保组件监听输入属性变更 #

在surf-radiobutton的组件类里，要确保selected是@Input()属性，并且如果组件内部用了局部变量存储状态，必须在输入变化时同步更新：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'surf-radiobutton',
  templateUrl: './surf-radiobutton.component.html'
})
export class SurfRadiobuttonComponent implements OnChanges {
  @Input() selected: boolean;
  @Input() disabled: boolean;
  @Input() lable: string;
  @Input() code: string;
  @Input() showNameCode: boolean;
  @Input() group: string;

  // 如果组件内部用了局部变量存储选中状态
  private _radioSelected: boolean;

  ngOnChanges(changes: SimpleChanges) {
    // 监听selected属性的变化，同步到内部变量
    if (changes.selected) {
      this._radioSelected = changes.selected.currentValue;
    }
  }
}

步骤2：确认模板绑定正确 #

在surf-radiobutton的模板里，要确保单选按钮的checked属性绑定到正确的变量：

<!-- 直接绑定到输入属性selected -->
<input type="radio" 
       [checked]="selected" 
       [disabled]="disabled"
       [name]="group"
       >
<!-- 或者如果用了内部变量_radioSelected -->
<input type="radio" 
       [checked]="_radioSelected" 
       [disabled]="disabled"
       [name]="group"
       >

2. 检查父组件的变更检测策略与onSelect方法 #

如果父组件使用了ChangeDetectionStrategy.OnPush，Angular只会在输入引用变化或手动触发变更检测时更新视图，这时候有两种解决方式：

方式1：修改onSelect方法，返回新对象（触发OnPush变更检测） #

修改对象属性时，对象引用没有变化，OnPush策略不会触发更新，你可以通过创建新对象来改变引用：

// 假设你的数据列表是dataList数组
onSelect(data) {
  this.dataList = this.dataList.map(item => {
    if (item === data) {
      // 复制原对象并修改selected属性，返回新对象
      return {...item, selected: !item.selected};
    }
    return item;
  });
}

方式2：手动触发变更检测 #

如果不想修改数据结构，可以注入ChangeDetectorRef手动标记需要更新：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'your-parent-component',
  templateUrl: './parent.component.html',
  // 如果父组件用了OnPush策略
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  onSelect(data) {
    data.selected = !data.selected;
    // 手动标记组件需要进行变更检测
    this.cdr.markForCheck();
  }
}

3. 额外排查点：确认单选按钮组的name属性 #

同一组的单选按钮需要设置相同的name属性（也就是你传入的group），否则浏览器不会自动管理单选状态，确保surf-radiobutton里的单选按钮name绑定到了group输入属性，避免选中状态混乱。

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