(Angular) 处理来自 API 的数据数组

Question

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

API 将采用一对多躺椅的预订模式，但我无法终生让它发挥作用。检查浏览器控制台时，躺椅数组要么是“未定义”，要么我只能让它显示 3 个属性（ID、Zone 或 Type）之一，其中预订对象需要整个对象。

我得说我在这个项目上的目标很高，因为我在 JS/TS 和 HTML 方面的经验也非常缺乏，现在就展示出来了。我用谷歌搜索并尝试改变很多东西，但在这里真的很茫然。我相信有一些简单的解决方法，有更多经验的人可以指出。谢谢！

reservation.ts （模型）

import { Lounger } from "./lounger";

export class Reservation {
    id: string;
    date: string;
    startTime: string;
    endTime: string;
    userId: string;
    loungers: Lounger[];
}

lounger.ts （型号）

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

add-edit-component.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; }

}

add-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++;
    });
  }
}

这是您的代码的清理版本。只是作为一个建议，请查看我链接的 Stackblitz 中提供的代码，因为您的问题仅与复选框有关，这实际上是您只需要展示它以使其成为一个最小的可重复示例。如果问题被清楚地呈现并且所有不必要的代码都已被剥离，您将更有可能得到答案。没有人想筛选一堆代码来尝试找到问题...嗯...我只是这样做了：D

STACKBLITZ供您参考