Angular 2单选按钮事件

Question

在 Angular 2 中，当单选按钮被选中或取消选择时，这些事件被称为什么？

类似于：

<input type="radio" (select)="selected()" (unselect)="unselected()" />

因此，当我在一组单选按钮中点击其中一个时，它将为新选择触发selected()函数，并为先前的选择触发unselected()函数。

- Tuomas Toivonen

---

无线电列表示例应用程序 http://www.freakyjolly.com/how-to-show-radio-input-listing-in-angular-6/ - Code Spy

Answer 1

它有效。

<input type="radio" (change)="handleChange($event)" />

但你需要编写更多的代码来判断“已选择”还是“未选择”。
您可以在*.ts文件中尝试这个：

  export class Comp {

    private _prevSelected: any;

    handleChange(evt) {
      var target = evt.target;
      if (target.checked) {
        doSelected(target);
        this._prevSelected = target;
      } else {
        doUnSelected(this._prevSelected)
      }
    }

  }

- Edmond Wang

---

运行良好。您可以迭代或使用switch(target.id)来检查输入/单选按钮集合中的输入。敬礼，卡尔。 - Carl S.

Answer 2

HTML的结构如下：

 <div *ngFor = " let displayParameter of displayParameters" >    
    <!-- <li><a href="#">{{displayParameter}}</a></li>     -->
    <!-- <input type="radio"  name="displayParameter"  (change) ="handleChange(event)")>  -->
    <h5><input type="radio" name="radiogroup" (change)="handleChange(displayParameter)" [checked]="(idx === 0)" >{{displayParameter}} </h5>
</div>

代码如下：

 handleChange(evt){ 
            this.displayParameter = evt;
        console.log(evt);
      } 

- user1632871

Answer 3

当您将单击事件分配给标签而不是输入时，它才起作用。

- edu