角度4チェックボックスからの値を取得

Question

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

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

Answer 1

あなたはmd-checkboxにchangeイベントを追加し、機能にオブジェクトを渡すことができます。 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 demo

Answer 2

代わりのe.checked次を使用することができます。

の作業例

<input class="form-check-input" type="checkbox" (change)="selectBadge($event, badge._id)"> <span class="badge badge-pill {{badge.color}}">{{badge.text}}</span> 

selectBadge (e, id) { 

if (e.target.checked) { 

    this.product.badges.push(id); 
} else { 
    this.product.badges.splice(this.product.badges.indexOf(id), 1); 
}}