Angular 2 单选按钮事件

Posted 2023-02-21

【中文标题】Angular 2 单选按钮事件

【英文标题】：Angular 2 radio button events

【发布时间】：2016-09-29 04:40:48

【问题描述】：

当单选按钮被选中或取消选中时，Angular 2 中调用的那些事件是什么。

有点像

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

因此，当我单击组中的一个单选按钮时，它将触发 selected() 用于新的选择，unselected() 用于之前的选择。

【问题讨论】：

广播列表示例应用程序freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

【参考方案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)
      
    

  

【讨论】：

效果很好。您可以迭代或使用 switch(target.id) 来检查输入/单选按钮集合中的输入。问候，卡尔

【参考方案2】：

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

【参考方案3】：

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