Получение данных перед рендерингом файла компонента / HTML в угловом формате

Question

Пожалуйста, у меня возникают проблемы при работе с некоторыми асинхронными данными на angular, которые поступают из моего API. Я потратил некоторое время, пытаясь выяснить, как масштабировать, но я все еще застреваю.

Сценарий Когда в режиме редактирования формы пациента мне нужно позвонить в мой центр обслуживанияполучить все доступные центры из дб. Когда данные возвращаются, мне нужно обработать данные, чтобы проверить, к каким центрам относится пациент, а затем использовать это в html. Но я вижу, что компонент визуализируется до получения данных. Это потому, что, когда я нажимаю кнопку «Сохранить», чтобы проверить данные, я вижу данные там. Но в методе, где мне нужно написать некоторую логику, когда я пытаюсь проверить данные, возвращенные из API, они остаются неопределенными.

NB: Я не могу использовать преобразователь вэтот случай, потому что я не использую ссылку маршрутизатора для перехода на страницу.

Я пытался использовать асинхронный канал для условной проверки и рендеринга 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);   
   }

Answer 1

getCentres(callBack?) {
        this.centreService.getCentres().subscribe(res => {
          this.centreList = res;
          // this.loadedData = true;
          //Now call your function directly
         this.checkParamsForEditAction();
        });
     }

Вызовите вашу функцию после загрузки центров получения Порядок вызова

this.initCentreForm();
this.getCentres();

Answer 2

Попробуйте это

в 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