Question

所以我有一个Angular应用程序，其中我的一个表单包含一个复选框列表。这是我在模板上生成复选框的方法：

<div *ngFor="let i of items;let x = index">
  <input type="checkbox" name="selectedItems[]" [(ngModel)]="selectedItems[x]" [value]="i.id" />
</div>

我的items的格式为{id: value, item_name: value}，而selectedItems只是项目ID的数组。

我的问题是在编辑期间。因此，在编辑过程中，我需要在添加过程中检查以前检查过的项目。现在，即使selectedItems[x]的值为null，也会出现此复选框。

谢谢！

Answer 1

我认为，将所选条件放入项目JSON中，如下所示：

item: 
  {
    id: any,
    item_name: any,
    isSelected: Boolean,
  }[];

然后，您可以使用模板执行以下操作：

<div *ngFor="let i of items;let x = index">
  <input type="checkbox" name="checkbox-{{x}}" [(ngModel)]="i.isSelected" [value]="i.id" />
</div>

但是，即使不想重塑您的结构，当您的ngModel是null或undefined时，也不会对其进行检查。在您的情况下，正如您所说的selectedItems是项id的数组，它可能是像"null"这样的null字符串，因为在角度undefined，null，{{1 }}，''和...是错误的表达式。

如果有任何问题，请在下面评论，以便我为您提供更多帮助。

Answer 2

我最终删除了ngModel，只是使用复选框的change事件更新了数据，如下所示：

<div *ngFor="let i of items;let x = index">
  <input type="checkbox" name="selectedItems[]" (change)="onCheckChange(i, $event.target.checked)" [checked]="isItemChecked(i)" 
  [value]="i.id" />
</div>

Answer 3

您可以尝试使用[checked]属性绑定属性并传递值true / false。

item: 
  {
    id: any,
    item_name: any,
    isSelected: Boolean,
  }[];

<div *ngFor="let i of items;let x = index">
  <input type="checkbox" name="checkbox-{{x}}" [checked]="i.isSelected" [(ngModel)]="i.item_name" [value]="i.id" />
</div>

Angular：处理复选框数组

3 个答案: