在不使用 *ngFor 的情况下查找选择了哪个单选按钮答案

【问题标题】：finding which radio button was selected without using a *ngFor在不使用 *ngFor 的情况下查找选择了哪个单选按钮
【发布时间】：2017-02-23 17:39:21
【问题描述】：

我尝试了很多不同的方法：

 <input type="radio" name="group" id="ssnRadio" [checked]="ssn" [(ngModel)]="ssnSelected">

和

<input type="radio" name="group" [checked]="lastName" [(ngModel)]="lastNameSelected" >

还有更多单选按钮，但它们像上面一样逐步增加。它们都是分开的，因此不在*ngFor

在组件中我有以下内容：

  ssnSelected: boolean;
    userIdSelected: boolean;
    lastNameSelected: boolean;
    officeSelected: boolean;
    roleSelected: boolean;

    selectedRow: number;

    ngOnInit(){
        this.ssnSelected=false;
        this.userIdSelected=false;
        this.lastNameSelected=false;
        this.officeSelected=false;
        this.roleSelected=false;
    }

并且按钮在它里面有这个方法：

 search() {

        if (this.ssnSelected==true) {
            console.log( this.ssn);
            this.user = this._searchService.getUserBySSN(this.ssn);
        }
        if (this.userIdSelected == true) {
            console.log(this.userId);
            this.user = this._searchService.getUserById(this.userId);
        }

所以我需要找到选择了哪个单选按钮，这样我才能调用正确的服务并传入一个使用两种方式绑定到服务的值。

【问题讨论】：

标签： angular

【解决方案1】：

如果只是真假情况，似乎你需要复选框

你可以在下面使用，

<input type="checkbox" [(ngModel)]="ssnSelected" > SSN Selected

检查这个Plunker!!

更新：

根据评论，您似乎只需要从单选按钮组中选择一个，您可以在下面尝试，

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <label><input type="radio"  name="group" value="ssn" [(ngModel)]="groupVal" > SSN</label>
  <label><input type="radio"  name="group" value="lastname" [(ngModel)]="groupVal" > Last name</label>
  <label><input type="radio"  name="group" value="role" [(ngModel)]="groupVal" > SSN Role</label>
  <br />
  <br />
  <button (click)="search()" >Search</button>
  `
})
export class AppComponent { 
  groupVal = "ssn";
  name = 'Angular'; 

  search(){
   switch(this.groupVal){
     case "ssn":
        console.log("ssn selected");
        break;
     case "lastname":
        console.log("lastname selected");
        break;
     case "role":
        console.log("role selected");
        break;
      default:
        break;
   }
  }
}

更新Plunker!!

希望这会有所帮助！

【讨论】：

我有这个，但我需要它有单选按钮功能。他们只能选择一个复选框，当他们选择另一个复选框时，前一个复选框被取消选中。因此单选按钮功能。
@Drew1208：根据您的评论更新答案，干杯！！

【解决方案2】：

您需要订阅表单更改或单独的输入更改。

<input type="radio" 
    name="group" 
    id="ssnRadio" 
    [checked]="ssn" 
    [(ngModel)]="ssnSelected" 
    (change)="doSomething($event)">

【讨论】：

这似乎是正确的路线，但您能详细说明一下吗？