web-dev-qa-db-ja.com

Angular 6選択したチェックボックスをngModelに渡す方法

選択されたチェックボックス（繰り返し）をngModelに渡すことに問題があります。

    <label class="btn btn-outline-secondary" 
     *ngFor="let test of tests"  >
      <input type="checkbox">
    </label>

tsで私はモデルを持っています：

     testData = <any>{};

this.tests = [{
    id: 1, name: 'test1' 
  },
  {
    id: 2, name: 'test2' 
  },
  {
    id: 3, name: 'test3' 
  },  
]

NgModelとngModelChangeを試しましたが、選択したチェックボックスの表示にまだ問題があります。これどうやってするの？

angularcheckboxngforangular2-ngmodel
5
emka26

[(ngModel)]="test.name"を使用します

 <label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
  <input type="checkbox" [(ngModel)]="test.selected" > {{test.name}} - {{test.selected}}
</label>

デモ

6
Sachila Ranawaka

モデルにプロパティを追加して、テンプレートにバインドすることをお勧めします。

<label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
    <input type="checkbox" [(ngModel)]="test.isChecked">
</label>

this.tests = [{
    id: 1, name: 'test1', isChecked: false
  },
  {
    id: 2, name: 'test2', isChecked: true
  },
  {
    id: 3, name: 'test3', isChecked: false 
  },  
]
2
Stanisalv Dontsov