Proszę, mam problemy z pracą z niektórymi danymi asynchronicznymi na angular, które pochodzą z mojego API. Spędziłem trochę czasu, próbując wymyślić, jak się skalować, ale nadal utknąłem.

Scenariusz Będąc w trybie edycji formularza pacjenta, muszę zadzwonić do serwisu mojego centrum, aby uzyskać wszystkie dostępne ośrodki z db. Po zwróceniu danych muszę je przetworzyć, aby sprawdzić, do których ośrodków należy pacjent, a następnie użyć tego w html. Ale widzę, że komponent renderuje się, zanim dane zostaną odebrane. Dzieje się tak, ponieważ kiedy klikam przycisk Zapisz, aby sprawdzić dane, widzę tam dane. Ale w metodzie, w której muszę napisać jakąś logikę, kiedy próbuję sprawdzić dane zwrócone z API, pozostaje ona niezdefiniowana.

Uwaga: nie mogę w tym przypadku użyć resolwera, ponieważ nie używam linku routera do nawigacji na tę stronę.

Próbowałem użyć potoku asynchronicznego, aby warunkowo sprawdzić i wyrenderować kod HTML tylko wtedy, gdy otrzymam dane, co było rozwiązaniem, które działało dla kogoś innego. Ale wydaje się, że to nie działa w moim przypadku, ponieważ nadal jestem niezdefiniowany w zmiennej, która jest wewnątrz metody i gdzie muszę przetworzyć zwrócone dane przed wyświetleniem mojego komponentu / html.

Cel Celem jest najpierw pobranie wszystkich centrów przed zainicjowaniem formularza reaktywnego, aby móc obsłużyć dane w metodzie getPatientCentres (). Zamierzam użyć danych uzyskanych z API do wstępnego wypełnienia tablicy podczas tworzenia formularza.

Zrobiłem inne kroki i badania, ale wydaje się, że rozwiązanie nie rozwiązuje mojej sprawy.

Każda pomoc lub logika postępowania będzie bardzo mile widziana.

Oto mój kod 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);   
   }
1
GNG 21 listopad 2019, 10:01

2 odpowiedzi

Spróbuj tego

W ngOnInit

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

Metoda getCenters

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

Możesz też użyć forkJoin lub async await

0
Saurabh Yadav 21 listopad 2019, 10:12
Witam @Yadav. Próbowałem tego rozwiązania, ale wydaje się, że to nie działa. Metoda checkParamsForEditAction pobiera dla mnie dane pacjenta za pomocą resolvera. Kiedy właśnie przetestowałem twój pomysł, otrzymuję => Nie można odczytać właściwości 'activatedRoute' z undefined
 – 
GNG
21 listopad 2019, 10:31
getCentres(callBack?) {
        this.centreService.getCentres().subscribe(res => {
          this.centreList = res;
          // this.loadedData = true;
          //Now call your function directly
         this.checkParamsForEditAction();
        });
     }

Zadzwoń do swojej funkcji po załadowaniu centrów pobierania Kolejność wywoływania

this.initCentreForm();
this.getCentres();
0
Hitech Hitesh 21 listopad 2019, 10:43
Cześć @Hitech. Przed inicjalizacją formularza dane również nie wydają się być zdefiniowane. Celem jest pobranie danych przed inicjalizacją formularza. Drugą metodą jest po prostu przetwarzanie danych. Dlatego próbowałem najpierw wywołać metodę getCentres() na ngOnint.
 – 
GNG
21 listopad 2019, 11:54