Bagaimana cara menunggu HTML dimuat hingga mendapatkan data dalam bentuk sudut?

Saya telah dialihkan ke halaman lain seperti ini

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

di halaman baru

ngOnInit

saya mendapatkan params seperti ini

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

dan kemudian saya memanggil API di ngOint seperti ini

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




       });

tapi HTML saya memuat data sebelum saya mendapatkan data dari API saya

cara memuat HTML setelah mendapatkan data dari API

Apa yang saya coba:

tidak dapat memahami konsep tersebut

Solusi 1

Saya menghargai bahwa ini adalah pertanyaan lama tetapi ada baiknya untuk menjawab mengapa ada masalah di sini. Pengiklan telah menyatakan bahwa mereka ingin menunggu hingga data dikembalikan dari API dan kemudian memuat HTML halaman tertentu. Secara teknis Anda akan berpikir hal ini mungkin dilakukan dengan membuat panggilan untuk mengambil data sebagai panggilan sinkron pemblokiran, tetapi hal itu tidak mungkin dilakukan dalam aplikasi JavaScript karena ini merupakan sistem thread tunggal. Panggilan API, secara efektif, adalah janji untuk mendapatkan data dari server sebagai respons, yang kemudian dapat ditindaklanjuti.

Jadi, sekarang kita tahu bahwa halaman tersebut asynchronous, bagaimana kita menyembunyikan konten di halaman tersebut hingga datanya dikembalikan. Mekanisme umumnya adalah dengan menggunakan variabel yang dimuat, yang hanya disetel ke true ketika data dikembalikan. Kemudian, cukup gunakan ngIf untuk menampilkan data ketika data yang dimuat benar.