Ansicht ist, bevor API-Antwort-Rendering ist bereit, von abonnieren

Question

I-Daten am Abrufen von API-Antwort,

Das Problem manchmal macht, ist html vor Antwort bereit, von subscribe().

so ist das Problem, html lädt keine Daten, es scheint leer. Hier ist es wichtig, HTML nur zu laden, nachdem die API-Antwort fertig ist.

Hier ist mein Service

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) { 
     } 
    }) 
    } 

I ngOnInit für den Aufruf Funktion

01.231 bin mit

versuchte auch Funktion von constructor auch

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> 

Wie kann ich sicher zu rufen, dass Ansicht Antwort bereit ist, erst nach machen?

Answer 1

Sie können einen einfachen Dienst erstellen, der die Seite erst lädt, wenn alle Komponenten bereit sind. Geben Sie für diese:

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; 
     } 

     } 

Und Sie Komponente dies zu tun:

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


     } 
    } 

`