發現其中選擇單選按鈕，而無需使用* 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

回答

相關問題