角度 - 仅当数组 A 中的值存在于数组 B 中时才选择复选框答案

【问题标题】：angular - select checkbox only if values in array A exist in array B角度 - 仅当数组 A 中的值存在于数组 B 中时才选择复选框
【发布时间】：2020-07-30 10:24:31
【问题描述】：

我正在遍历一个数组以检查其中是否存在某些选定的值，然后应选中一个复选框。当我记录结果时，它能够在控制台中产生正确的响应('hello')，这意味着代码可以完美运行，但我不知道为什么它无法选中复选框

this.selected = [ 1, 8032, 8042, 8047, 8021, 7986];

this.srvresp = [{id:11, name:'AA'}, {id:8032, name:'BB'}, {id:10, name:'CC'}, {id:409, name:'DD'}, {id:300, name:'EE'} ,{id:302, name:'FF'}, {id:478, name: 'GG'}, {id:8042, name: 'HH'}, {id:8047, name:'II'}, {id:8021, name:'JJ'}, {id:7986, name:'KK'}];

for (const  s of this.srvresp) {
  for (const  selected of this.selected) {
    if (s.id == selected) {
      console.log('hello')
      s.checked = true;
    }
  }
}

HTML

<div *ngFor="let item of srvresp; index as ind">
 <input [(ngModel)]="item.checked" formControlName="selectedStudents" [value]="item.id" type="checkbox" class="custom-control-input" id="-item-{{ind}}">

</div>

【问题讨论】：

我试过你的代码，当我删除 formControlName 指令时它工作正常。根据this SO answer 的说法，混合模板驱动表单和响应式表单并不是一个好主意。
添加整个组件和html代码，

标签： javascript angular ecmascript-6

【解决方案1】：

您不应混合使用模板驱动和反应式表单以避免冲突行为 - 您应该替换多余的 formControlName 属性使用。

【讨论】：