javascript - Angular radio input 不使用 bootstrap 4 btn-group 更新模型

Question

我有一个 Angular 形式 (v2.4.8)，它根据 scotch.io 中的示例在 radio 选择中使用 ngFor .这在我的应用程序中不起作用，如果我点击 radio ，user.category 不会更新。

组件代码:

export class RegistrationComponent implements OnInit {

  public user: User;

  public userTypes = [
    {value: 'type1', display: 'Type 1'},
    {value: 'type2', display: 'Type 2'},
    {value: 'type3', display: 'Type 3'}
  ];

  constructor() { }

  ngOnInit() {
    this.user = {
      name: '',
      email: '',
      category: this.userTypes[0].value
    }
  }

  public save(isValid: boolean, f: User) {
    console.log(f);
  }

}

和模板:

<div class="btn-group" data-toggle="buttons">
  <label *ngFor="let userType of userTypes" class="btn btn-outline-secondary">
    <input type="radio" name="category" [(ngModel)]="user.category" [value]="userType.value"> {{userType.display}}
  </label>
</div>

用户界面如下:

export interface User {
  name: string;
  email: string;
  category: string;
}

编辑

这似乎是使用带 Angular Bootstrap btn-group 的问题，看起来我正确处理了点击事件。我通过向标签添加点击事件来修复它。在下面回答。

Answer 1

这是 bootstrap btn-group radio 的问题，而不是 angular 的问题。解决方法是向标签添加点击事件。

HTML:

<label *ngFor="let userType of userTypes" class="btn btn-outline-secondary" (click)="changeCategory(userType.value)">
  <input type="radio" name="category" [(ngModel)]="user.category" [value]="userType.value"> {{userType.display}} 
</label>

Javascript - 添加到组件:

public changeCategory(category) {
  this.user.category = category;
}