javascript - 在Angular中渲染组件/HTML文件之前获取数据

拜托，我在处理来自我的API的有关angular的一些异步数据时遇到问题。我花了一些时间试图弄清楚如何进行扩展，但仍然遇到困难。

情境
在患者表格的编辑模式下，我需要致电中心服务以从数据库获取所有可用的中心。返回数据后，我需要处理数据以检查患者属于哪个中心，然后在html上使用它。但是我看到该组件在接收数据之前先渲染。这是因为，当我单击“保存”按钮以检查数据时，我在那里看到了数据。但是在需要编写一些逻辑的方法中，当我尝试检查从API返回的数据时，它仍然是未定义的。

注意：在这种情况下，我无法使用解析器，因为我没有使用路由器链接导航到页面。

我尝试过使用异步管道来有条件地检查和呈现html，除非我收到的数据是对其他人有用的一种解决方案。但这在我的情况下似乎不起作用，因为我仍然无法定义方法内部的变量，并且在显示组件/ html之前需要处理返回的数据。

目标
目标是在初始化反应形式之前首先获取所有中心，以便我可以处理getPatientCentres（）方法上的数据。我打算在创建表单时使用从API获取的数据来预填充数组。

完成了其他步骤和研究，但该解决方案似乎无法解决我的问题。

任何帮助或逻辑上如何进行将不胜感激。

这是我的TS代码

  export class Patient2Component implements OnInit {
  formTitle: string;
  patientForm: FormGroup;
  centreList: ICentre[] = [];
  loadedData: boolean = false;
  patient: IPatient;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private centreService: CentreService,
  ) { }

  ngOnInit() {
    this.getCentres();
    this.initCentreForm();
    this.checkParamsForEditAction();
  }

  initCentreForm() {
    this.patientForm = this.fb.group({
      id: [null],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      centres: [this.centreList]
    });
  }

  getCentres() {
    this.centreService.getCentres().subscribe(res => {
      this.centreList = res;
      // this.loadedData = true;
    });
  }

  checkParamsForEditAction() {
    this.activatedRoute.data.subscribe(data => {
    this.patient = data['patient'];
    if (this.patient) {
      this.formTitle = 'Edit Patient';
      this.getPatientCentres(this.patient);
      this.assignValuesToControl(this.patient);
    }
   });
  }

  assignValuesToControl(patient: IPatient) {
      this.patientForm.patchValue({
        id: patient.id,
        firstName: patient.firstName || '',
        lastName: patient.lastName || '',
      });
  }

  getPatientCentres(patient: IPatient) {
    const patientCentres = patient.patientCentres;

    /**Here, the centreList is undefined since data has not returned yet
     * And i need this data for processing.
     */
    console.log(this.centreList);
  }

  save() {
     /**Here, i can see the data  */
     console.log(this.centreList);
   }

最佳答案

尝试这个

在ngOnInit中

 ngOnInit() {
    this.initCentreForm();
    this.getCentres(this.checkParamsForEditAction);
  }

getCenters方法

     getCentres(callBack?) {
        this.centreService.getCentres().subscribe(res => {
          this.centreList = res;
          // this.loadedData = true;
          if(callBack) {
            callBack();
          }
        });
     }

您还可以使用forkJoin或async await