时间戳

首页 > 解决方案 > 角度复选框显示来自其他记录的检查

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>

这是模型：

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

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

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

标签： angularcheckbox

解决方案

像这样为复选框添加一个唯一的 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 属性，但您可以使用该数组中的任何唯一值。

推荐阅读