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

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

记录的现有复选框值在变量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; 
        }
      }
    }

this.mips404Checked=this.chgToEdit.array_Mips404.split（'^'）；
for（设i=0；i

上面的代码是ngOnInIt

如前所述，上述代码在我第一次访问页面或重新加载页面时起作用。当我在浏览了第一张唱片后又去看另一张唱片时，问题就出现了。从那时起，所有记录都会显示原始支票和自己的支票

---

由于我必须从“编辑”组件导航到“列表”组件才能导航到其他记录，因此返回到新记录的“编辑”组件似乎会刷新内容并为新记录提供正确的检查，但这并没有发生。非常感谢您的帮助

在复选框中添加一个唯一的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>

{{check.full}

---

在本例中，我使用了options数组中的value属性，但您可以使用该数组中的任何唯一值。

将唯一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>

{{check.full}

---

在本例中，我使用了options数组中的value属性，但您可以在该数组中使用任何唯一的值。

我认为问题在于您对每个复选框都使用了相同的名称。尝试使用索引或其他方法使其唯一。如果你能提供stackblitz的演示，我可以研究一下。我相信问题是你对每个复选框都使用了相同的名称。尝试使用索引或其他方法使其唯一。如果你能提供stackblitz的演示，我可以研究一下。