Javascript 角度无线电输入未使用bootstrap 4 btn组更新型号

我在angular（v2.4.8）中有一个表单，它在基于中示例的无线电选择中使用ngFor。这在我的应用程序中不起作用，如果我单击收音机，

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>

编辑

---

这似乎是使用带角度的引导

btn group

时出现的问题，看起来我正确处理了单击事件。我通过在标签上添加一个单击事件来修复它。回答如下。

这是自举btn组无线电的问题，而不是角度问题。解决方法是向标签添加单击事件

HTML:

---

你有什么错误吗？还有在

标签上执行
*ngFor
的任何特殊原因吗？如果您的代码对我来说运行良好，请验证您是否在模块中改进了FormsModule。@Bogarfaouielhoucine问题似乎与引导有关，而不是角度有关。
export interface User {
  name: string;
  email: string;
  category: string;
}

<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>

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