如何在angular2 rc5中实现单选框答案

【问题标题】：How to implement radio box in angular2 rc5如何在angular2 rc5中实现单选框
【发布时间】：2016-09-23 16:23:02
【问题描述】：

谁能建议我实现单选按钮。我有两个收音机 AM 和 PM。第一次应检查 AM。并且每当用户单击按钮时，控制器对象中的值都会更新。

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

【问题讨论】：

标签： angular radio-button

【解决方案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;
    }

}

看看这是否有帮助。

【讨论】：

【解决方案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 {}

【讨论】：

【解决方案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>

【讨论】：