如何在angular2 rc5中实现无线电盒

Question

任何人都可以请建议我实现单选按钮。我有两个电台AM和PM。第一次AM应该被检查。并且每当用户单击按钮值时，都应该在控制器对象中进行更新。

time; 
time = {am:"yes",pm:"no"}; 

Answer 1

尝试像这个 -

HTML模板：

<div class="form-group"> 
    <div> 
     <label class="radio_option"> 
     <input type="radio" class="option-input radio" value="am" id="am" name="time" checked /> 
     <span (click)="disabledstatus && changeDisabledStatus(!disabledstatus)"></span> 
     </label> 
     <label id="radiolabel">AM</label> 
    </div> 
    <div> 
     <label class="radio_option"> 
     <input type="radio" class="option-input radio" value="pm" id="pm" name="time"> 
     <span (click)="!disabledstatus && changeDisabledStatus(disabledstatus)"></span> 
     </label> 
     <label id="radiolabel">PM</label> 
    </div> 
</div> 

在您的成分 -

export class SomeComponent implements OnInit { 

    disabledstatus = false; 

    constructor() { } 

    ngOnInit() { } 

    changeDisabledStatus() {  
     this.disabledstatus = !this.disabledstatus; 
    } 

} 

看看这会有所帮助。

Answer 2

最好的办法是使用[(ngModel)]。

但它不会产生你描述的对象，但在行动中看到： https://plnkr.co/edit/ojRw5lrXGONkKQ7yroKW?p=preview

你可以简单地形成你的对象是这样的：

let timeObj = { 
    am: time === 'am', 
    pm: time === 'pm', 
}; 

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {FormsModule} from '@angular/forms' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (click)="print()">Hello {{name}}</h2> 

     <input type="radio" name="radiobuttongroup1" value="am" [(ngModel)]="time" > 
     <label> AM</label><br> 

     <input type="radio" name="radiobuttongroup1" value="pm" [(ngModel)]="time" > 
     <label> PM</label> 

    </div> 
    `, 
}) 
export class App { 

    time = 'am'; 

    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    print() { 
    console.log(this.time); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 3

<input type="radio" [(ngModel)]="step1Data.addInfoProvided" name="addInfoLinks" class="radio-box" value="Yes" id="yes" 
           /> 
           <label class="radio-caption lang-yes" for="yes"></label> 
           <input type="radio"  [(ngModel)]="step1Data.addInfoProvided" name="addInfoLinks" class="radio-box" value="No" id="no" 
           /> 
           <label class="radio-caption lang-no" for="no"></label>