web-dev-qa-db-ja.com

Angular 4チェックボックスから値を取得

angularが初めてで、この非常に単純な問題にこだわっています。Webサービスからデータを取得して、いくつかのチェックボックスを表示しています。すべてのチェックボックスの値を取得する方法が必要です。ユーザーが選択しました。マテリアルテーマを使用しています。

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"  
       [formControl]="CreateSocietyForm.controls['checkMaintainanceType']">
         {{x.maintenancetype}}
    </md-checkbox>
</span>
angulartypescriptcheckboxangular-material2
5
Ninad Gaikwad

changeイベントをmd-checkboxに追加して、オブジェクトを関数に渡すことができます。 arrayとcheckedを取得したものを追跡するuncheckedを維持し、それに応じて配列を更新します。

html：

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"
       (change)="change($event, x)">
         {{x.maintenancetype}}
    </md-checkbox>
</span>

<p> Selected value: {{selectedValue | json}} </p>

component.ts：

export class SelectFormExample {
  selectedValue = [];

  maintainanceTypeList = [
    {maintenancetype: 'Steak'},
    {maintenancetype: 'Pizza'},
    {maintenancetype: 'Tacos'}
  ];

  change(e, type){
    console.log(e.checked);
    console.log(type);
    if(e.checked){
      this.selectedValue.Push(type);
    }
    else{
     let updateItem = this.selectedValue.find(this.findIndexToUpdate, type.maintenancetype));

     let index = this.selectedValue.indexOf(updateItem);

     this.selectedValue.splice(index, 1);
    }

  }

  findIndexToUpdate(type) { 
        return type.maintenancetype === this;
    }
}

Plunkerデモ

8
Nehal

の代わりに e.checked次を使用できます。

実施例

[〜＃〜] html [〜＃〜]

<input class="form-check-input" type="checkbox" (change)="selectBadge($event, badge._id)">

TypeScript

selectBadge (e, id) {

 if (e.target.checked) {
   this.product.badges.Push(id);
 }  else {
   this.product.badges.splice(this.product.badges.indexOf(id), 1);
 }

}
10
Alex Kumundzhiev