觀點是API響應之前渲染是從訂閱準備

Question

我取出由API響應數據，

的問題是有時響應已從subscribe()準備好之前的HTML渲染。

所以問題是html不加載數據，它顯示爲空白。這裏重要的是隻有在API響應準備好之後才能加載html。

這裏是我的服務

service.ts

getItinerary(){ 
     let params={ 
      "Module_SRNO": "", 
      "Screen_SRNO":"", 
      "Type": "Itinary", 
      "Unit": 0 , 
      "Location": 0, 
      "Branch":"0", 
      "UserId": 0, 
      "Ip": "0", 
      "Corporate": this.corporate, 
      "InquiryCode": this.InquiryCode, 
      "QuoteCode": this.QuoteCode 
      } 
     return this.http.post(this.url,params) 
     .map(res=>res.json()) 
     .catch(this.errorHandler); 
} 

Component.ts

getItinerary(){ 
    this.quoteService.getItinerary() 
    .subscribe(itinerary => { 
     this.itinerary = itinerary.resultData.Itinary; 
     this.Itns = asEnumerable(this.itinerary).GroupBy(x => x.CheckinDay, x => x, 
     (key, b) =>   
     { return { 
      CheckinDay: key ,itineraries: asEnumerable(b).ToArray() } 
      }) 
     .ToArray(); 
    }, 
    response => { 
    if (response.status == 404) { 
     } 
    }) 
    } 

我使用ngOnInit調用函數

ngOnInit() { 
    this.getItinerary(); 
} 

還試圖

component.html

<section id="itinerary" class="itinerary-section page-section" > 
    <div class="itinerary-section-title"> 
     <h3><span>tour</span> ITINerary</h3> 
     <span>Highlights Of Your Journey</span> 
    </div> 
    <div class="itinerary-section-detail flex-container">   
     <div class="flex-container-detail"> 
     <div class="itinerary-section-slider">      
      <div class="itinerary_carousel"> 
       <div class="carousel-indicators"> 
        <a class="left carousel-control" href="#carousel-example-generic3" data-slide="prev"> 
        <span class="icon-prev"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic3" data-slide="next"> 
        <span class="icon-next"></span> 
        </a> 
       </div> 
       <div id="carousel-example-generic3" class="carousel slide"> 
        <div class="carousel-inner"> 
        <div class="item" class="item" [class.active]="i === 0" *ngFor="let itinerary of Itns;let i = index"> 
         <div class="itn-left"> 
         <div class="itinerary-img"> 
          <img src="{{imgURL}}/{{itinerary.itineraries[0].BackgroundImg}}" class="img-responsive" alt=""> 
         </div> 
        </div> 
        <div class="itn-right"> 
         <div class="day-circle"> 
          <div class="itinerary-date">Day {{itinerary.itineraries[0].CheckinDay}}</div> 
         </div> 
         <div class="row"> 
          <div class="itn-detail"> 
           <div class="itinerary-tour"> 
           <div class="itinerary-tour-title">  
            <h4>{{itinerary.itineraries[0].CityName}}</h4> 
            <span>{{itinerary.itineraries[0].CheckinDate | date}}</span> 
           </div>           
           <div class="itinerary-tour-detail"> 
            <div class="itinerary-tour-detail-in mCustomScrollbar" data-mcs-theme="dark" > 
             <div class="row"> 
              <div class="col-md-6" *ngFor="let itn of itinerary.itineraries; let i = index "> 
              <div class="itinerary-tour-detail-wapper c{{i+1}}"> 
               <div class="itinerary-tour-detail-wapper-icon"> 
                <img src="assets/icons/{{itn.Icon}}.png" alt=""> 
               </div> 
               <span> 
                <p>{{itn.Checkintime}}</p> 
                {{itn.IternaryText}} 
               </span>             
              </div> 
              </div> 
             </div> 
            </div> 
            <div class="col-md-12 row"> 
             <div class="itinerary-tour-detail-wapper-btm-txt" > 
              <div class="col-md-8" *ngFor="let itn of itinerary.itineraries; let i = index "> 
              <div *ngIf="itn.ItenaryFor === 'Sightseen' || itn.ItenaryFor === 'Sightseen'"> 
              <div class="rating-icon" ><img src="assets/images//rating-icon.jpg" alt=""></div> 
              <p>Sightseen :</p> 
              <span>{{itn.TourDelight}}</span> 
              </div> 
             </div> 
            </div> 
           </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
     <!--Slider--> 
    </div> 
</div> 
</div> 
</section> 

我怎樣才能確保該視圖只渲染後的反應是準備從constructor也稱功能？

Answer 1

您可以製作一個簡單的服務，在所有組件準備就緒之前不加載頁面。看看這個：

import {EventEmitter, Injectable} from '@angular/core'; 

     @Injectable() 
     export class LoadPageService { 
      private isReady= false; 
      // Event emitter that make event each time the variabe isReady changes 
     Updated: EventEmitter <boolean>= new EventEmitter(); 
     setdata(value) { 
      this.isReady = value; 
      this.Updated.emit(this.isReady); 
     } 

      getdata() { 
      return this.isReady; 
     } 

     } 

而且在你組件做：

 ` isReady:boolean; 
     ngOnInit() { 
     this.isReady = false; 
     this.loadpage.setdata(this.isReady); 

    this.httpService.GetPic('/manger').subscribe(
     (data: any) => { 

     // You code Here to get data from server or other API 

     this.isReady = true; 
     this.loadpage.setdata(this.isReady); 


     } 
    } 

`