从模板中使用 Angular 2+ 切换引导单选按钮

Question

我正在尝试使用角度类和属性语句切换一组单选按钮。当我单击按钮时，我可以看到 active 类已根据需要添加和删除，checked 属性也已设置。然而，单选按钮实际上并没有被选中。

<div class="btn-group " data-toggle="buttons">
  <label class="btn btn-primary" [ngClass]="{'active': s}">
    <input type="radio" name="options" id="option1" autocomplete="off" (click)="s=true" [attr.checked]="s"> Yes
  </label>
  <label class="btn btn-primary" [ngClass]="{'active': !s}">
    <input type="radio" name="options" id="option2" autocomplete="off"(click)="s=false" [attr.checked]="!s"> No
  </label>
</div>

Live demo of the problem

使用 Angular 5，引导 4.0.0

编辑：不是重复的，因为我知道还有其他方法可以做到这一点。但我想弄清楚为什么上述方法不起作用。

EDIT2：如果我使用(click)="doSomething()" 绑定到一个函数，它就可以工作！但也会导致错误，因为未定义该函数。如果我创建该函数，它会再次停止工作。

Answer 1

我有一个更好的解决方案。您可能会欣赏这种简单性。因为用户实际上要单击单选按钮，所以他们使用 ngmodel 将数据传递到字段中，这是您不想要的。

html

<div class="btn-group" role="group" aria-label="View Type">
   <button type="button" [class.active]="sortClass" (click)="switch(1)" class="btn btn-secondary">
      <span>Grid</span>
   </button>
   <button type="button" [class.active]="listClass" (click)="switch(2)" class="btn btn-secondary">
      <span>List</span>
   </button>
 </div>

组件.ts

// Create variables
private sortClass: boolean;
private listClass: boolean;

// INITIALIZE TRUE / FALSE for both variables
constructor() {
    this.sortClass = false;
    this.listClass = true;
}

switch(i) {
        if (i === 1) {
            this.sortClass = !this.sortClass
            this.listClass = !this.listClass
        } else {
            this.listClass = !this.listClass
            this.sortClass = !this.sortClass
        }
    }

然后你会看到一个是活跃的，另一个是假的。当您单击它们时，它们将选择真/假。

Answer 2

处理click 事件时会发生奇怪的事情。如果直接在模板中设置标志值，单选按钮检查不正确：

(click)="s = false"

但如果标志是用方法设置的，那么一切正常：

(click)="setValue(false)"

您可能更喜欢处理change 事件，这似乎一直是work correctly：

(change)="s = false"

更好的选择是使用ngModel 的数据绑定，如this stackblitz 所示：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary" [class.active]="s">
    <input type="radio" name="options" id="option1" [(ngModel)]="s" [value]="true"> Yes
  </label>
  <label class="btn btn-primary" [class.active]="!s">
    <input type="radio" name="options" id="option2" [(ngModel)]="s" [value]="false"> No
  </label>
</div>

Answer 3

更改属性必须在 Angular 的上下文之外发生，因此您需要 NgZone.run()

https://angular.io/api/core/NgZone

blah() {
    this.zone.run(() => { console.log("boom!"); });
}

<div class="btn-group " data-toggle="buttons">
  <label class="btn btn-primary" [ngClass]="{'active': s}">
    <input type="radio" name="options" id="option1" autocomplete="off" (click)="s=true; blah();" [attr.checked]="s === 'true' ? true : false"> Yes
  </label>
  <label class="btn btn-primary" [ngClass]="{'active': !s}">
    <input type="radio" name="options" id="option2" autocomplete="off"(click)="s=false; blah();" [attr.checked]="s === 'false' ? true : false"> No
  </label>
</div>