角度无线电输入未使用引导程序 4 btn-group 更新模型答案

【问题标题】：Angular radio input not updating model with bootstrap 4 btn-group角度无线电输入未使用引导程序 4 btn-group 更新模型
【发布时间】：2017-08-03 15:11:59
【问题描述】：

我有一个 angular (v2.4.8) 表单，它根据scotch.io 中的示例在无线电选择中使用 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>

用户界面如下：

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

编辑

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

【问题讨论】：

您是否遇到任何错误？在label 上做*ngFor 还有什么特别的原因吗？
如果您的代码对我来说可以正常工作，只需验证您是否在模块中输入了 FormsModule。
@BougarfaouiElhoucine 问题似乎在于引导程序而不是角度。

标签： javascript twitter-bootstrap angular

【解决方案1】：

这是引导 btn-group 无线电的问题，而不是角度问题。解决方法是给标签添加点击事件。

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

【讨论】：