Angular 2：CheckBox/Radio選擇取消選擇操作

Question

我有一個我迭代並創建無線電輸入列表的年齡列表。然後，我選擇其中一個，並希望通過點擊清除按鈕取消選擇它。如何在使用打字稿的angular2上實現。

<span *ngFor="let ageItem of ageList;"> 
    <input type="radio" name="age" value="{{ageItem}}" 
      (click)="filter($event.target.value)"> 
     <span>{{ageItem}} years</span><br> 
    </span> 
<button md-button="" (click)="clearFilter()">Clear</button> 

P.S：該列表包含100個元素，因此將會有100個複選框/無線電輸入。請相應提出建議。

Answer 1

您應該使用ngModel進行雙向數據綁定。

和更改檢測可以通過(ngModelChange)做..

看到這個工作演示：https://plnkr.co/edit/smMSiJnSXJQHOxW5Pi45?p=preview

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <br /> 
     <div *ngFor="let radiobtn of options.radiobuttons"> 
     <h4>{{radiobtn.name}}</h4> 
     <div *ngFor="let val of radiobtn.values"> 
      <input [name]="radiobtn.name" type="radio" [value]="val" [(ngModel)]="radiobtn.selection" (ngModelChange)="onChange()" /> 
      <label>{{val}} years</label> 
     </div> 
     <br /> 
     Selected: {{radiobtn.selection ? radiobtn.selection : 'none'}} 
     <br /> 
     </div> 

     <br /> 
     <br /> 

     <div *ngFor="let chkbx of options.checkboxes"> 
     <input type="checkbox" [(ngModel)]="chkbx.val" (ngModelChange)="onChange()" /> 
     <label>{{chkbx.name}}</label> 
     </div> 
     <br /> 
     <br /> 

     <div *ngFor="let inpt of options.inputs"> 
     <label>{{inpt.name}}</label> 
     <input type="text" [(ngModel)]="inpt.val" (ngModelChange)="onChange()" /> 
     </div> 

     <br /> 
     <br /> 
     <button (click)="reset()">reset!</button> 
    </div> 
    `, 
}) 
export class App { 

    options = { 

    radiobuttons: [ 
     { name: 'ages1', values: [1,2,3,4,5,6,7,8,9], selection: undefined }, 
     { name: 'ages2', values: [65,66,68,90], selection: undefined } 
    ] 

    checkboxes: [ 
     { name: 'checkbox1', val: false }, 
     { name: 'checkbox2', val: false }, 
     { name: 'checkbox3', val: true }, 
     { name: 'checkbox4', val: false } 
    ], 

    inputs: [ 
     { name: 'input 1', val: '' }, 
     { name: 'input 2', val: 'aksjd' }, 
     { name: 'input 3', val: '' }, 
     { name: 'input 4', val: '' }, 
     { name: 'input 5', val: '123' } 
    ] 
    } 

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

    onChange() { 
    // .. call filter(this.selectedAge) 

    console.log(this.options); 
    } 

    reset() { 
    this.options.radiobuttons.forEach(r => r.selection = false); 
    this.options.checkboxes.forEach(c => c.val = false); 
    this.options.inputs.forEach(i => i.val = ''; 

    this.onChange(); 
    } 
} 

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