发现其中选择单选按钮，而无需使用* ngFor

我曾尝试这许多不同的方式：发现其中选择单选按钮，而无需使用* ngFor

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

和

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

有多个无线电按钮，但它们是加紧像上面。他们都在A组份*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); 
     }

所以我需要找到什么单选按钮被选中，所以我可以调用正确的服务，并传入一个使用双向绑定到服务的值。

来源

2017-02-23 Drew1208

看来你需要的复选框，如果它仅仅是真假情况

，你可以在下面使用，

<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！

希望这有助于！

来源

2017-02-23 18:25:58

我有，但我需要它具有单选按钮功能。他们只能选择一个复选框，当他们选择另一个复选框时，先前的复选框将被取消选中。因此单选按钮功能。 – Drew1208

@ Drew1208：根据您的评论更新回答，干杯！ –

你钉了它！ – Drew1208

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

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

来源

2017-02-23 18:08:33

这似乎是正确的路线，但你可以详细说明吗？ – Drew1208

发现其中选择单选按钮，而无需使用* ngFor

回答

相关问题