web-dev-qa-db-ja.com

Angular 2：チェックした複数のチェックボックスの値を取得する

私の問題は本当に簡単です：私はこのようなチェックボックスのリストがあります：

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

そして、私は選択されたオプションの配列を送りたいと思います。オプション1、5、8が選択されている場合は[option1, option5, option8]です。この配列は、HTTP PUTリクエストを介して送信したいJSONの一部です。

ご協力いただきありがとうございます！

jsonformscheckboxangularangular2-forms
51
Yannick Morel

Gunterのおかげで解決策が見つかりました。それが誰かを助けることができるならば、これは私の全体のコードです：

<div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="#option of options; #i = index">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option}}"
                           [checked]="options.indexOf(option) >= 0"
                           (change)="updateCheckedOptions(option, $event)"/>
                    {{option}}
                </label>
            </div>
        </div>

これが私が使っている3つのオブジェクトです。

options = ['OptionA', 'OptionB', 'OptionC'];
optionsMap = {
        OptionA: false,
        OptionB: false,
        OptionC: false,
};
optionsChecked = [];

そして3つの便利な方法があります。

1。 optionsMapを起動するには：

initOptionsMap() {
    for (var x = 0; x<this.order.options.length; x++) {
        this.optionsMap[this.options[x]] = true;
    }
}

2。optionsMapを更新します。

updateCheckedOptions(option, event) {
   this.optionsMap[option] = event.target.checked;
}

。optionsMapをoptionsCheckedに変換し、それをoptionsに格納してからPOST要求を送信します。

updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.Push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}
27
Yannick Morel

これはngModel（final Angular 2）を使った簡単な方法です。

<!-- my.component.html -->

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options">
        <label>
            <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}
97
ccwasden

のようなリストを作成します - 

this.xyzlist = [
  {
    id: 1,
    value: 'option1'
  },
  {
    id: 2,
    value: 'option2'
  }
];

HTML： - 

<div class="checkbox" *ngFor="let list of xyzlist">
            <label>
              <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
          </div>

それから、そのコンポーネントのTSに： - 

onCheckboxChange(option, event) {
     if(event.target.checked) {
       this.checkedList.Push(option.id);
     } else {
     for(var i=0 ; i < this.xyzlist.length; i++) {
       if(this.checkedList[i] == option.id) {
         this.checkedList.splice(i,1);
      }
    }
  }
  console.log(this.checkedList);
}
19
Alok Kamboj
<input type="checkbox" name="options" value="option" (change)="updateChecked(option, $event)" /> 

export class MyComponent {
  checked: boolean[] = [];
  updateChecked(option, event) {
    this.checked[option]=event; // or `event.target.value` not sure what this event looks like
  }
}
4
Günter Zöchbauer

私はこれが同じ問題を抱えている人に役立つことを願っています。

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

component.ts

flightids配列には、このような別の配列があります[[true、 'id_1']、[false、 'id_2']、[true、 'id_3'] ...]ここでtrueはユーザーがチェックし、falseはユーザーがチェックし未チェック。ユーザーが一度もチェックしたことのない項目は配列に挿入されません。

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) // here, true means that user checked the item 
        confirmList.Push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}
3
James Sung

私はこの問題に直面したばかりで、ワークスペースをきれいに保つために、できるだけ少ない変数ですべてを機能させることにしました。これが私のコードの例です

<input type="checkbox" (change)="changeModel($event, modelArr, option.value)" [checked]="modelArr.includes(option.value)" />

変更を求めた方法は、モデルに価値を押し出すか、それを取り除くことです。

public changeModel(ev, list, val) {
  if (ev.target.checked) {
    list.Push(val);
  } else {
    let i = list.indexOf(val);
    list.splice(i, 1);
  }
}
2
tv1st

  1. 値Objectのリストを使っている人たちのために少しだけ単純化しました。 XYZ.Comonent.html

    <div class="form-group">
        <label for="options">Options :</label>
        <div *ngFor="let option of xyzlist">
            <label>
                <input type="checkbox"
                       name="options"
                       value="{{option.Id}}"

                       (change)="onClicked(option, $event)"/>
                {{option.Id}}-- {{option.checked}}
            </label>
        </div>
        <button type="submit">Submit</button>
    </div>

    ** XYZ.Component.ts **。

  2. リストを作成する - xyzlist。

  3. 値を割り当てて、私はこのリストのJavaから値を渡しています。
  4. 値はInt-Id、ブール値でチェックされます（Component.tsで渡すことができます）。

  5. これで耐えられますか。

    xyzlist;//Just created a list
onClicked(option, event) {
    console.log("event  " + this.xyzlist.length);
    console.log("event  checked" + event.target.checked);
    console.log("event  checked" + event.target.value);
    for (var i = 0; i < this.xyzlist.length; i++) {
        console.log("test --- " + this.xyzlist[i].Id;
        if (this.xyzlist[i].Id == event.target.value) {
            this.xyzlist[i].checked = event.target.checked;
        }
        console.log("after update of checkbox" + this.xyzlist[i].checked);

    }
2
Gourav Bhatia

私は同じ問題に遭遇しました、そして今私はもっと好きな答えを持っています（あなたもそうかもしれません）。各チェックボックスを配列インデックスに制限しました。

最初に私はこのようにオブジェクトを定義しました：

SelectionStatusOfMutants: any = {};

チェックボックスは次のようになります。

<input *ngFor="let Mutant of Mutants" type="checkbox"
[(ngModel)]="SelectionStatusOfMutants[Mutant.Id]" [value]="Mutant.Id" />

ご存じのとおり、JSのオブジェクトは任意のインデックスを持つ配列です。だから結果はとても単純に取得されています：

このように選択したものを数える：

let count = 0;
    Object.keys(SelectionStatusOfMutants).forEach((item, index) => {
        if (SelectionStatusOfMutants[item])
            count++;
    });

そしてそのフェッチと同様に、このように選択されたものを取得します。

let selecteds = Object.keys(SelectionStatusOfMutants).filter((item, index) => {
        return SelectionStatusOfMutants[item];
    });

分かりますか？！とてもシンプルでとても美しい。 TG.

1
ConductedClever

上記の@ccwasdenの解決策は、小さな変更を加えても私には有効です。各チェックボックスには一意の名前を付ける必要があります。

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options; let i = index">
        <label>
            <input type="checkbox"
                   name="options_{{i}}"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

また、メインモジュールにFormsModuleをインポートするようにします。

import { FormsModule } from '@angular/forms';


imports: [
    FormsModule
  ],
1
Syed Waqas

私は同じような問題を解決するのに長い時間を費やしたので、私は私の経験を共有するために答えています。私の問題は、指定されたイベントがトリガーされた後に多くのチェックボックスの値を取得するということです。私はたくさんの解決策を試しましたが、私にとって一番セクシーなのはViewChildrenです。

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components: QueryList<any>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

ここにあります： https://stackoverflow.com/a/40165639/4775727

参照のための他の潜在的な解決策は、同様のトピックがたくさんあります、それらのどれもこの解決策を目的としていません...：

0
4x10m