【解決方法】Angularでデータを取得するまでHTMLのロードを待つにはどうすればよいですか?

[ad_1]

このような別のページにリダイレクトされました

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

新しいページで

ngOnInit

このようなパラメータを取得しています

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

そして、私はこのようにngOintでAPIを呼び出しています

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();




       });

しかし、私のHTMLはAPIからデータを取得する前にデータをロードします

APIからデータを取得した後にHTMLを読み込む方法

私が試したこと：

概念を理解できない

解決策 1

これが古い質問であることは承知していますが、なぜここに問題があるのかを説明する価値は十分にあります。投稿者は、API からデータが返されるまで待ってから、特定のページの HTML をロードしたいと述べています。技術的には、データを取得する呼び出しをブロッキング同期呼び出しにすることでこれが可能になると考えられますが、JavaScript アプリケーションではシングルスレッドシステムであるため、これは不可能です。 API 呼び出しは事実上、応答としてサーバーからデータを取得することを約束し、その後、そのデータに基づいて処理を行うことができます。

ページが非同期であることがわかったので、データが返されるまでページ上のコンテンツを非表示にするにはどうすればよいでしょうか。一般的なメカニズムは、データが返されたときにのみ true に設定される、ロードされた変数を使用することです。次に、ngIf を使用して、loaded が true の場合のデータを表示します。

[ad_2]