Angular 2：复选框/单选取消选择操作

Question

我有一个年龄列表，我在其中迭代并创建无线电输入列表。然后，我选择其中一个并希望通过单击清除按钮取消选择它。如何使用 typescript 在 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 {}