Angular二维数组绑定多选框时不同cargoId选中值互相干扰问题求解

问题根因 #

• 所有 cargo 对应的表单都绑定了同一个全局的cargoSignupForm实例，共用同一个trucksId FormArray，不同 cargo 的勾选操作本质都是修改同一个数组，自然会互相干扰
• truckFormArray被声明为数组类型，但实际用 cargoId（字符串类型）作为索引取值，本质是把数组当普通对象使用，逻辑不严谨，也容易出现隐式问题
• onChange方法中每次都把全局的this.cargoSignupForm.controls.trucksId赋值给this.truckFormArray[cargoId]，导致所有 cargoId 对应的数组引用都指向同一个 FormArray 实例，所有修改都会全局生效

优化实现方案 #

组件代码调整 #

// 改用对象存储每个cargoId对应的独立FormGroup，key为cargoId，value为对应表单实例
cargoForms: Record<string, FormGroup> = {};

ngOnInit() {
  /*... 原有获取cargos、trucksByCargoId的逻辑保留 ...*/
  // 给每个cargo初始化独立的表单
  this.cargos.forEach(cargo => {
    this.cargoForms[cargo.id] = this.fb.group({
      trucksId: this.fb.array([])
    })
  })
}

onChange(truckId: string, isChecked: boolean, cargoId: string) {
  // 直接取当前cargo对应的独立FormArray
  const truckArr = this.cargoForms[cargoId].get('trucksId') as FormArray;
  if (isChecked) {
    truckArr.push(new FormControl(truckId));
  } else {
    const idx = truckArr.controls.findIndex(control => control.value === truckId);
    if (idx > -1) {
      truckArr.removeAt(idx);
    }
  }
}

onSignupForCargo(cargoId: string) {
  // 直接打印当前cargo对应表单的选中卡车ID列表
  console.log(this.cargoForms[cargoId].value.trucksId);
}

模板代码调整 #

<mat-card *ngFor="let cargo of cargos" class="cont-mat">
    <!-- 绑定当前cargo对应的独立FormGroup -->
    <form [formGroup]="cargoForms[cargo.id]" (submit)="onSignupForCargo(cargo.id)" *ngIf="!isLoading">
        <p>Odaberite kamione s kojima želite izvršiti prijevoz - Težina robe: {{cargo.weight}} kg</p>
        <div *ngFor="let truck of (trucksByCargoId.get(cargo.id))">
            <input type="checkbox" (change)="onChange(truck._id, $event.target.checked, cargo.id)">{{truck.regNumber}}
        </div>
        <input type="submit" value="GO" class="button-basic">
    </form>
</mat-card>

内容的提问来源于stack exchange，提问作者nbalog