(Angular)使用API的数据数组

Question

关于通过API服务获取的一些数据。数据(躺椅(被接收并显示在前端应用程序(Angular(的一个表中，我在其中为每一行设置复选框。这个想法是，用户应该能够选中他想添加到预订中的框。

API将采用一对多休息室的预订模式，但我一辈子都无法做到这一点。当检查浏览器控制台时，躺椅阵列要么是"未定义"，要么我只能让它显示3个属性中的一个(ID、Zone或Type(，其中保留对象需要整个对象。

我不得不说，我一直致力于这个项目，因为我在JS/TS和HTML方面的经验也非常缺乏，这一点现在就显现出来了。我在谷歌上搜索并尝试更改了很多内容，但在这里我真的不知所措。我相信有一些简单的解决办法，有更多经验的人会指出。谢谢

预订.ts (型号(

import { Lounger } from "./lounger";
export class Reservation {
id: string;
date: string;
startTime: string;
endTime: string;
userId: string;
loungers: Lounger[];
}

躺椅(型号(

export class Lounger {
id: string;
type: string;
zone: string;
}

添加编辑组件.ts

export class AddEditComponent implements OnInit {
reservationForm: FormGroup;
id: string;
isAddMode: boolean;
loading = false;
submitted = false;
user: User;
reservation: Reservation;
loungersFromApi: Lounger[];
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private reservationService: ReservationService,
private alertService: AlertService,
private accountService: AccountService,
private loungerService: LoungerService
) {
this.user = this.accountService.userValue;
}

ngOnInit() {
this.id = this.route.snapshot.params['id'];
this.isAddMode = !this.id;
this.loungerService.getAll()
.pipe(first())
.subscribe(x => this.loungersFromApi = x);
this.reservationForm = this.formBuilder.group({
date: ['', Validators.required],
startTime: ['', Validators.required],
endTime: ['', Validators.required],
userId: [this.user.id],
loungers: this.formBuilder.array([], Validators.required)
});
}
onCheckboxChange(e) {
const loungers: FormArray = this.reservationForm.get('loungers') as FormArray;
if (e.target.checked) {
loungers.push(new FormControl(e.target.value));
} else {
let i: number = 0;
loungers.controls.forEach((item: FormControl) => {
if (item.value == e.target.value) {
loungers.removeAt(i);
return;
}
i++;
});
}
}
get f() { return this.reservationForm.controls; }

}

添加edit.component.html

<form [formGroup]="reservationForm" (ngSubmit)="onSubmit()">
<div>
<div *ngFor="let lounger of loungersFromApi; let i=index">
<label>
<input type="checkbox" [value]="lounger.id" (change)="onCheckboxChange($event)" />
{{lounger.id}}
</label>
</div>
</div>
</form>

Answer 1

虽然可以将对象添加为FormControl，但我会将其添加为FormGroup。

我们可以使用find来比较您的loungersFromApi中event.target.value的值，以匹配您正在使用的id。模板与您的相同，但只是在onCheckboxChange中进行了一些更改，以添加FormGroups:

onCheckboxChange(e) {
const loungers: FormArray = this.reservationForm.get(
'loungers'
) as FormArray;
if (e.target.checked) {
// use find to find the matching item
const item = this.loungersFromApi.find(x => x.id === e.target.value);
if (item) {
// push a formgroup instead with the whole object
loungers.push(this.formBuilder.group(item));
}
} else {
let i: number = 0;
loungers.controls.forEach((item: FormControl) => {
// again, find the item in your array by id
if (item.value.id == e.target.value) {
loungers.removeAt(i);
return;
}
i++;
});
}
}

这是您的代码的清理版本。作为一个建议，看看我链接的Stacklitz中提供的代码，因为你的问题只是复选框，这实际上是你只需要显示的，它是一个最小的可复制示例。如果问题被清楚地呈现出来，并且所有不必要的代码都被删除了，那么你更有可能得到答案。没有人愿意通过筛选一堆代码来找到问题。。。好我刚刚做了：D

STACKBLITZ供您参考