Comment attendre le chargement HTML jusqu’à ce que les données soient angulaires ?

[ad_1]

J’ai été redirigé vers une autre page comme celle-ci

this.router.navigate(['prob/telecomnewdeal'], { queryParams:{ 'companyId': this.selectedCompnay, 'domainId':this.domainId } });

sur une nouvelle page

ngOnInit

je reçois des paramètres comme celui-ci

ngOnInit(): void {
   this.route.queryParams.subscribe(params => {
     this.companyId = +params['companyId'];
     this.domainId = +params['domainId'];
   });

et puis j’appelle une API dans ngOint comme ça

this.telecomDealService.addNewDeal(this.userEmail, false, this.companyId, this.domainId).subscribe((data: TelecomDealList) => {

       this.dealQuestionsList = data.AssginedTowers[0].Questions;
       let test = this.dealQuestionsList[0].IsHeader
       this.addloadded = true;
       console.log(this.addloadded);
       for (var i = 0; i < data.AssginedTowers[0].Questions.length; i++) {
         if (data.AssginedTowers[0].Questions[i].listAnswerOptions != null) {

           this.drpoption = data.AssginedTowers[0].Questions[i].listAnswerOptions;
           this.dealQuestionsList[i].listAnswerOptions = [];
           for (var j = 0; j < Object.entries(this.drpoption).length; j++) {
             let tempfilter: Item;
             tempfilter = {
               text: Object.entries(this.drpoption)[0][0],
               value: Object.entries(this.drpoption)[0][0]
             };

             this.dealQuestionsList[i].listAnswerOptions.push(tempfilter);
           }

         }
       }


       this.spinner.hide();




       });

mais mon code HTML charge les données avant d’obtenir les données de mon API

comment charger le HTML après avoir obtenu les données de l’API

Ce que j’ai essayé :

je n’arrive pas à comprendre le concept

Solution 1

J’apprécie qu’il s’agisse d’une question plus ancienne, mais cela vaut la peine d’expliquer pourquoi il y a un problème ici. L’affiche a déclaré qu’elle souhaitait attendre que les données soient renvoyées par une API, puis charger le code HTML d’une page particulière. Techniquement, vous penseriez que cela est possible en faisant de l’appel pour récupérer les données un appel synchrone bloquant, mais cela n’est pas possible dans une application JavaScript car il s’agit d’un système à thread unique. L’appel API est, en fait, une promesse d’obtenir des données d’un serveur dans une réponse, sur lesquelles il est ensuite possible d’agir.

Alors, maintenant que nous savons que la page est asynchrone, comment masquer le contenu de la page jusqu’à ce que les données soient renvoyées. Un mécanisme typique consiste à utiliser une variable chargée, qui n’est définie sur true que lorsque les données sont renvoyées. Ensuite, utilisez simplement ngIf pour afficher les données lorsque le chargement est vrai.

[ad_2]