角度复选框显示来自其他记录的检查答案

【问题标题】：Angular checkboxes show checks from other records角度复选框显示来自其他记录的检查
【发布时间】：2019-09-13 03:42:02
【问题描述】：

我在 Angular 中有一个模板驱动的表单，它在一个组件中提交值，而在另一个组件中具有类似的表单来编辑值（基本上只是一个编辑页面）。一切似乎都运行良好，但事实证明，我的复选框在我第一次加载页面时返回正确的值，但是如果我转到第二条记录，它会继承前一条记录中的检查（并添加任何现有的检查新记录）。因此，如果记录 1 选中了选项 1，并且我导航到记录到并且应该选中了选项 3，它将同时选中选项 1 和选项 3。或者如果记录 2 应该没有检查，它将继承记录 1 中检查的选项 1。

这是一个模板示例：

<div class="form-check" *ngFor="let check of options">
                    <input class="form-check-input" type="checkbox" name="chgMips" [checked]="check.checked" (change)="getMips404Checks($event)">
                    <label class="form-check-label">
                      {{ check.full }}
                    </label>
                  </div>

这是模型：

options = [
    {value: 'G9642', full: '(G9642) desc1', checked: false},
    {value: 'G9643', full: '(G9643) desc2', checked: false},
    {value: 'G9497', full: '(G9497) desc3', checked: false},
    {value: 'G9644', full: '(G9644) desc4', checked: false}
  ]

记录的现有复选框值以分隔列表的形式出现在变量 chgToEdit.array_Mips404 中，使用“^”符号作为分隔符。例如，如果选项 1 和 2 被选中，组件首先接收值“G9642^G9643”。考虑到这一点，这就是我用来设置选项的方法：

this.mips404Checked = this.chgToEdit.array_Mips404.split('^');
    for (let i = 0; i < this.mips404Checked.length; i++) {
      for (let j = 0; j < this.options.mips404.length; j++) {
        if (this.options.mips404[j].value === this.mips404Checked[i]) {
          this.options.mips404[j].checked = true;
          break; 
        }
      }
    }

以上代码在ngOnInIt中。

如前所述，上述代码在我第一次访问页面或重新加载页面时有效。这个问题只是在我访问了第一个记录后转到另一个记录时才出现。从那时起，所有记录都会显示原始支票及其自己的支票。

由于我必须从“编辑”组件导航到“列表”组件才能导航到不同的记录，看起来回到新记录的“编辑”组件会刷新内容并给我正确检查新记录，但这没有发生。非常感谢任何帮助！

【问题讨论】：

我认为问题在于您对每个复选框都使用相同的名称。尝试使用索引或其他东西使其独一无二。如果你能提供关于 stackblitz 的演示，我可以研究一下。

标签： angular checkbox

【解决方案1】：

像这样为复选框添加一个唯一的 id：

<div class="form-check" *ngFor="let check of options">
                    <input class="form-check-input" type="checkbox" id="check.value" name="chgMips" [checked]="check.checked" (change)="getMips404Checks($event)">
                    <label class="form-check-label">
                      {{ check.full }}
                    </label>
                  </div>

在这种情况下，我使用了 options 数组中的 value 属性，但您可以使用该数组中的任何唯一值。

【讨论】：