当我执行多个API端点调用时，Angular没有以表单显示所有数据

我有一个带有公式集的组件。编辑现有元素时，所有数据都加载到公式集中。API还收集了平台列表和类别列表。这些列表用于填充两个选择。所有数据都使用FormBuilder实例注入表单中。如果我只收集要编辑的元素的数据，而不收集任何列表，则所有字段都会正确填充。当我收集其中一个列表时，表单的第一个元素没有填充。若我从API中收集两个列表，那个么表单中有两个字段将不会填充。但是如果我查看包含数据的变量，所有字段都有数据并且不是空的。我试图链接API调用，但这不起作用，我得到了同样的行为

这是我的TS代码：

import {FormBuilder, FormGroup} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {ApplicationsService} from '../../../Services/applications.service';
import {ApplicationModel} from '../../../Models/ApplicationModel';
import {LicenseModel} from '../../../Models/LicenseModel';
import {LicenseService} from '../../../Services/license.service';
import {PlatformsModel} from '../../../Models/PlatformsModel';
import {PlatformsService} from '../../../Services/platforms.service';
import {concat} from 'rxjs';

@Component({
  selector: 'app-add-edit-app',
  templateUrl: './add-edit-app.component.html'
})
export class AddEditAppComponent implements OnInit {

  constructor(private formBuilder: FormBuilder,
              private router: Router,
              private applicationsService: ApplicationsService,
              private licensesService: LicenseService,
              private platformsService: PlatformsService,
              private route: ActivatedRoute) { }

  addEditForm: FormGroup;
  mode = 'add';
  id: number;
  application: ApplicationModel;
  licenses: LicenseModel[];
  platforms: PlatformsModel[];

  ngOnInit(): void {

    this.licensesService.getAllLicenses().subscribe(lics => {
      this.licenses = lics;
      this.platformsService.getAllPlatforms().subscribe(plats => {
        this.platforms = plats;
        this.loadApplication();
      });
    });
  }

  loadApplication() {
    const id = this.route.snapshot.paramMap.get('id');

    if (id !== null) {
      this.id = Number.parseInt(id, 10);
      this.mode = 'edit';
      this.applicationsService.getApplicationById(this.id).subscribe(plat => {
        this.application = plat;
        this.createFormGroup();
      });
    } else {
      this.application = new ApplicationModel();
      this.mode = 'add';
      this.createFormGroup();
    }
  }

  createFormGroup() {

    const platIds: number[] = [];
    this.application.platforms.forEach(plat => {
      platIds.push(plat.id);
    });

    this.addEditForm = this.formBuilder.group({
      name: [this.application.name],
      shortDescription: [this.application.shortDescription],
      longDescription: [this.application.longDescription],
      license: [this.application.license.id],
      isOpenSource: [this.application.isOpenSource],
      platforms: [platIds],
      officialWebsite: [this.application.officialWebsite],
      tags: [this.application.tags],
      categories: [this.application.categories],
      appIcon: [this.application.appIcon],
      captures: [this.application.captures],
      videos: [this.application.videos],
      twitter: [this.application.twitter],
      facebook: [this.application.facebook],
      author: [this.application.author],
      authorWebsite: [this.application.authorWebsite],
      codeUrl: [this.application.codeUrl],
      macAppStore: [this.application.macAppStore],
      windowsStore: [this.application.windowsStore],
      ubuntuSoftCenter: [this.application.ubuntuSoftCenter],
      macVersions: [this.application.macVersions],
      windowsVersions: [this.application.windowsVersions],
      linuxVersions: [this.application.linuxVersions],
      isActive: [this.application.isActive]
    });
  }

  onSubmit() {
    if (this.addEditForm.valid) {

      const sendData = this.addEditForm.value;

      // Llicència
      sendData.license = this.licenses.find(l => l.id === Number.parseInt(sendData.license, 10));

      // Plataformes
      const plats = sendData.platforms;
      const sendPlats: PlatformsModel[] = [];
      plats.forEach(p => {
        sendPlats.push(this.platforms.find(plt => plt.id === Number.parseInt(p, 10)));
      });
      sendData.platforms = sendPlats;

      if (this.mode === 'add') {
        this.applicationsService.addApplication(sendData)
          .subscribe(data => {
            this.router.navigate(['/apps']);
          });
      } else {
        if (this.id !== null) {
          this.applicationsService.updateApplication(this.id, sendData)
            .subscribe(data => {
              this.router.navigate(['/apps']);
            });
        }
      }
    }
  }
}

---

有什么建议吗？

好吧，我解决了我的问题，那是因为一个糟糕的初始化操作。当我只使用一个API端点调用加载表单时，所有工作正常，所有数据都已加载，所有未初始化的变量都已正确初始化，但当我希望从多个端点加载时，这些未初始化的变量会抛出错误。所以我所做的是：

• 在任何API调用之前第一次调用表单构造函数，因此，在本例中，表单是初始化的
• 初始化所有类属性
• 从API加载所有数据
• 调用表单构造函数以加载收集的数据