Question

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

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

由于我必须从“编辑”组件导航到“列表”组件才能导航到另一条记录，因此似乎回到新记录的“编辑”组件将刷新内容并为我提供正确检查新记录，但这没有发生。任何帮助将不胜感激！

Answer 1

向复选框添加唯一ID，如下所示：

                  time df2_col
0  2019-01-01 00:00:00     NaN
1  2019-01-01 00:00:20     NaN
2  2019-01-01 00:00:40     NaN
3  2019-01-01 00:01:00     NaN
4  2019-01-01 00:01:20     NaN
5  2019-01-01 00:01:40     NaN
6  2019-01-01 00:02:00     df2
7  2019-01-01 00:02:20     NaN
8  2019-01-01 00:02:40     NaN
9  2019-01-01 00:03:00     NaN
10 2019-01-01 00:03:20     NaN
11 2019-01-01 00:03:40     NaN
12 2019-01-01 00:04:00     NaN

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

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

1 个答案: