Как ждать завершения вызова API с помощью подписки в ngOnInit?

Question

Фактический порядок ведения журнала: ('ngOnInit начался') ('после меня, aaya', this.policydetails) ('Здесь', Object.keys (this.policy) .length)

Ожидаемый порядок ведения журнала:('ngOnInit начался') ('Здесь', Object.keys (this.policy) .length) ('after me aaya', this.policydetails)

Фрагмент файла Component.ts ниже:

ngOnInit() {
    console.log('ngOnInit started');
    this.route.params.subscribe(params => {
      this.getPoliciesService.getPolicyDetails(params.policyNo)
      .subscribe((data: PoliciesResponse) => {
        this.policy = data.data[0];
        this.flattenPolicy();
        console.log('Here', Object.keys(this.policy).length);
    });
    });

    this.makePolicyTable();

  }

  ngAfterViewInit() {
    console.log('after me aaya', this.policydetails);
    const table = this.policydetails.nativeElement;
    table.innerHTML = '';
    console.log(table);
    console.log(this.table);
    table.appendChild(this.table);
    console.log(table);
  }

Фрагмент файла Service.ts ниже:

getPolicyDetails(policyNo) {
  const serviceURL = 'http://localhost:7001/getPolicyDetails';
  console.log('getPolicyDetails service called, policyNo:', policyNo);
  const params = new HttpParams()
    .set('policyNo', policyNo);
  console.log(params);
  return this.http.get<PoliciesResponse>(serviceURL, {params} );
}

Фрагмент файла JS, соответствующий вызову API ниже:

router.get('/getPolicyDetails', async function(req, res) {
    let policyNo = (req.param.policyNo) || req.query.policyNo;
    console.log('policyNo', typeof policyNo);
    await helper.getPolicyDetails({'policyNo' : policyNo}, 
        function(err, data) {
            console.log(err, data)
            if (err) {
                return res.send({status : false, msg : data});
            }
            return res.send({status : true, data : data});
    });
});

Может кто-нибудь подсказать, где именно мне нужноasync-await для ожидаемого заказа журнала?

Answer 1

Можно также установить для переменной-флага значение false в компоненте, а затем, когда асинхронные вызовы завершатся, установить для него значение true и отобразить HTML на основе этой переменной-флага с синтаксисом * ngIf.

Answer 2

Если вы хотите, чтобы this.makePolicyTable() вызывался только после завершения веб-запроса (getPolicyDetails), то вы должны разместить этот вызов внутри блока .subscribe():

ngOnInit() {
  console.log('ngOnInit started');
  this.route.params.subscribe(params => {
    this.getPoliciesService.getPolicyDetails(params.policyNo)
      .subscribe((data: PoliciesResponse) => {
        this.policy = data.data[0];
        this.flattenPolicy();
        console.log('Here', Object.keys(this.policy).length);

        this.makePolicyTable();
      });
  });
}

.вероятно, также нужно переместить логику таблицы, которая находится в ngAfterViewInit(), внутри блока subscribe().

По сути, любая логика, которая должна ожидать завершения асинхронного вызова, должна запускаться внутри .subscribe()блок.В противном случае, как вы видите, его можно запустить до того, как веб-запрос вернется.

Наконец, я бы переместил этот вызов веб-службы в ngAfterViewInit() вместо ngOnInit().Тогда вы можете быть уверены, что компоненты и представления Angular настроены так, чтобы вы могли ими манипулировать после завершения вызова веб-службы.