Установите флажок в списке * ngfor checkbox - PullRequest
Новая
       10

Установите флажок в списке * ngfor checkbox

0 голосов
/ 13 ноября 2018

У меня есть список флажков, которые привязаны к объекту в моем файле машинописи компонентов, я хочу, чтобы он отмечал / снимал флажок в списке, когда пользователь нажимает флажок, но по какой-то причине он только проверяет и снимает флажокпервый флажок в списке, а не тот, на который нажал пользователь.Вот код ниже: 

<div>
  <ul class="reports-container">
    <li *ngFor="let item of data.reports" [class.active]="selectedReport==item" >
      <input type="checkbox" id="{{'savedreport'+i}}" class="k-checkbox" [checked]="item.IsSubscribed" [value]="item.IsSubscribed"(change)="onChkBoxChange($event,item)" />
    </li>
   </ul>
</div>

вот функция машинописи: 

onChkBoxChange(event, item: SavedReport) {
   item.IsSubscribed = event.target.checked;
}

когда я ставлю точку останова, она всегда проходит в первом элементе списка, есть мысли?

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Совет: используйте угловые формы для этого, поэтому формы существуют в угловых формах. собираюсь упростить весь случай, как ваш.

Я сделал stackblitz , чтобы показать вам, как это происходит, используя реактивные формы, и FormArray в угловых, вы даже можете использовать шаблонно-управляемые формы, если хотите, точка использует функцию forms в угловом виде сэкономит ваше время и усилия, когда вы столкнетесь с таким случаем.

HTML 

<div>
  <ul class="reports-container">
    <form [formGroup]="checkboxForm">
      <div formArrayName="checkboxList" *ngFor="let item of data; let i = index">
        <label>
          <input type="checkbox" id="{{'savedreport'+i}}" [name]="item" [formControlName]="i" class="k-checkbox" (change)="onChkBoxChange($event, i)" />
          {{item}}
        </label>
      </div>
    </form>
  </ul>
</div>

TS 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: [ '...' ]
})
export class AppComponent implements OnInit  {
  data: string[] = ['data1', 'data2', 'data3', 'data4'];
  checkboxForm: FormGroup;

  ngOnInit() {
    this.checkboxForm = new FormGroup({
      checkboxList: new FormArray([])
    });
    this.arrayOfCheckboxs();
  }

  private arrayOfCheckboxs() {
    const formArr = this.checkboxForm.get('checkboxList') as FormArray;
    this.data.forEach(item => {
      formArr.push(new FormControl());
    });
  }

  onChkBoxChange(e: MouseEvent, idx: number) {
    console.log(`${(<HTMLInputElement>e.target).name}: ${this.checkboxForm.get('checkboxList').value[idx]}`);
  }
}
0 голосов
/ 13 ноября 2018

Как сказал @Michael Beeson, я использовал двустороннее связывание со значением своего флажка, что решило проблему, поэтому код теперь: 

<div>
  <ul class="reports-container">
    <li *ngFor="let item of data.reports" [class.active]="selectedReport==item" >
      <input type="checkbox" id="{{'savedreport'+i}}" class="k-checkbox" [checked]="item.IsSubscribed" [(value)]="item.IsSubscribed"(change)="onChkBoxChange($event,item)" />
    </li>
   </ul>
</div>
...