带有二维数组的角复选框

Question

我有一个模板：

<mat-card *ngFor="let cargo of cargos" class="cont-mat">
    /*...*/
<form [formGroup]="cargoSignupForm" (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>

和 2 个组件函数：

truckFormArray = [[]];

ngOnInit() {
/*...*/
    this.cargoSignupForm = new FormGroup({
            trucksId: this.fb.array([])
          });
/*...*/
}

onChange(truckId: string, isChecked: boolean, cargoId: string) {
    this.truckFormArray[cargoId] = <FormArray>this.cargoSignupForm.controls.trucksId;
    if (isChecked) {
      this.truckFormArray[cargoId].push(new FormControl(truckId));
    } else {
      let index = this.truckFormArray[cargoId].controls.findIndex(x => x.value == truckId)
      this.truckFormArray[cargoId].removeAt(index);
    }
  }

  onSignupForCargo(cargoId: string) {
      console.log(this.truckFormArray[cargoId]);
  }

我只想console_log(this.truckFormArray[cargoId]) 。 必须有不同的truckFormArray为每cargoId 。 使用该解决方案，我也从以前的cargoId复选框中获取了trucksFormArray 。 我希望你明白我的意思。 某处是一个小错误，但如果您认为有更好的解决方案，欢迎您。 提前致谢

Answer 1

TruckFormArray 应该是一个对象

可以安全地假设cargoId不是从 0 开始按顺序递增的数字，因此将其声明为数组是没有意义的，而是将其声明为对象：

truckFormArray = {};

原因：Javascript 中的数组总是由从 0 开始并按顺序增加直到最后一个索引的数字索引。

TruckFormArray 不是对象实例的数据成员

由于它没有初始化为this.truckFormArray ，所以它前面没有this 。 因此，将所有出现的this.truckFormArray更改为truckFormArray 。

原因：在参考资源时，您将始终需要保持一致。

初始化truckFormArray

你有

this.truckFormArray[cargoId] = <FormArray>this.cargoSignupForm.controls.trucksId;

它似乎是不正确的。 您的trucksId似乎是一个数字，您尝试将其分配给被视为数组的资源，因此存在类型差异。 如果您想将每个trucksId存储到由卡车上的货物标识的数组中，那么您需要执行推送，但trucksId是选中了复选框。 因此，您将需要这样的东西，而不是上述内容：

if (!truckFormArray[cargoId]) {
    //Here I created a JS array for the sake of simplicity, but you can
    //create a FormArray instance instead if that's more helpful for you
    this.truckFormArray[cargoId] = [];
}

原因：如果你需要引用的数组还不存在，那么你需要创建它。

概括

你需要

• 修复truckFormArray的初始化
• 确保您以其定义的方式一致地引用它
• 在需要时初始化它的每个货物数组