带有二维数组的角复选框

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])。每个cargoId对应不同的truckFormArray。有了这个解决方案，我也从以前的cargoId复选框中得到了trucksFormArray。我希望你明白我的意思。有些地方是一个小错误，但如果你认为有更好的解决方案，那就欢迎你。提前感谢

Answer 1

truckFormArray应该是一个对象

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

truckFormArray = {};

<<p>原因/strong>: Javascript中的数组总是按照从0开始依次递增的数字进行索引，直到最后一个索引。

truckFormArray不是对象

实例的数据成员。因为它没有初始化为this.truckFormArray，所以在它前面没有this。因此，将出现的所有this.truckFormArray更改为truckFormArray。

<<p>原因/strong>:当你引用你的资源时，你总是需要保持一致。

初始化truckFormArray

你有

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

似乎是不正确的。您的trucksId似乎是一个数字，您尝试将其分配给被视为数组的资源，因此存在类型差异。如果希望将每个trucksId存储到由卡车上的货物标识的数组中，则需要执行push操作，但只有在选中复选框时才需要执行push操作。因此，您需要的不是上面的内容，而是如下所示:

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] = [];
}

<<p>原因/strong>:如果你需要引用的数组还不存在，那么你需要创建它。 <标题>

总结你需要

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