在订阅的 API 响应准备好之前，视图正在呈现

Question

我正在从 API 响应中获取数据，

问题是有时 html 会在来自 subscribe() 的响应准备好之前呈现。

所以问题是 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();
}

也尝试从constructor调用函数

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>

如何确保视图仅在响应准备好后才呈现？

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


      }
  }

`