在 *ngfor 复选框列表中定位一个复选框答案

【问题标题】：Target a checkbox in *ngfor checkbox list在 *ngfor 复选框列表中定位一个复选框
【发布时间】：2018-11-16 16:57:13
【问题描述】：

我有一个绑定到我的组件打字稿文件中的对象的复选框列表，我希望它在用户单击复选框时选中/取消选中列表，但由于某种原因，它只选中并取消选中列表上的第一个复选框，而不是用户单击的复选框。下面是代码：

<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;
}

当我放置一个断点时，它总是在列表中的第一项中传递，有什么想法吗？

【问题讨论】：

抱歉之前的回答，我误会了。您只是希望复选框的值正确绑定到 item.IsSubscribed，对吗？为什么不使用双向绑定？ [(value)] = "item.IsSubscribed"
不用担心，这是一个很好的点，不知道我怎么没想到，谢谢！

标签： html angular typescript checkbox

【解决方案1】：

正如@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>

【讨论】：

【解决方案2】：

建议：为此使用角度形式，这就是为什么存在角度形式的原因是会像你一样简化整个案例。

我做了一个stackblitz 来向你展示如何通过使用反应形式和FormArray 来实现这一点，如果你愿意，你甚至可以使用模板驱动的形式，重点是使用 Angular 中的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>

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]}`);
  }
}

【讨论】：