Question

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

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

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

Answer 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>

Answer 2

建议：为此请使用角度形式，这就是为什么角度形式存在可以像您一样简化整个案例。

我制作了stackblitz，向您展示了如何通过使用反应形式和FormArray来实现这一点，甚至您也可以使用模板驱动的形式，重点是使用{{1} }的角度功能会在遇到这种情况时节省您的时间和精力。

html

forms

TS

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

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

2 个答案: