关于angular中radio单选的问题

项目里用到了单选框

由于自己懒得写原生

想用antdesign样式但是又有问题

挣扎了一天

只能手写了

没想到如此简单

枯了

---

<input type="radio" name="type" value="line" checked>声网
<input type="radio" name="type" value="line">中创

如果使用[(ngModel)]绑定后，checked就不再生效，此时默认选中项与绑定的line初始值有关。

注意：name值要一样

 line: any = 'shengwang';

<input type="radio" name="type" [(ngModel)]="line" value="shengwang">声网
<input type="radio" name="type" [(ngModel)]="line" value="zhongchuang">中创

 选中某单选框后触发事件

万能的 ngModel和ngModelChange方法，当使用ngModel时，如果用绑定的line传值必须使用ngModelChange，因为选中单选项后，(click)执行要早于ngModelChange，所以此时(click)中传入的值还是未绑定的旧值.

<input type="radio" name="type" [ngModel]="line" (ngModelChange)="on($event)" 
value="shengwang">声网
<input type="radio" name="type" [ngModel]="line" (ngModelChange)="on($event)" 
value="zhongchuang">中创

 

 on(data) {
    console.log('data', data);//$event就是两个value值的其中一个
    this.line = data//由于是双向绑定，所以要赋值给line
  }