Question

我有一个角度（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的问题，看起来像我正确处理的单击事件。我通过向标签添加点击事件来修复它。回答如下。

Answer 1

这是bootstrap 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;
}

角度无线电输入未使用bootstrap 4 btn-group

1 个答案: