在订阅准备好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();
}

也试图从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

在完成所有组件准备之前，您可以创建一个不加载页面的简单服务。寻找这个：

public static void main(String[] args) {
    String text = "DDS Implementation Statement of Work Allegis Group This Statement of Work ( SOW ) dated " +
        "effective this 12 th day of November, 2015, is attached to and forms part of the Service Agreement (the " +
        "Agreement ) between Absolute Software, Inc. ( Absolute ) and Allegis Group, Inc. ( Customer ), and is " +
        "subject to the terms in the Service Agreement. Words and phrases defined in the Agreement have the same " +
        "meaning when used in this SOW. 1.";

    String textFrom = "(the Agreement )";
    String textEnd = "( Customer )";
    int startIndex = text.indexOf(textFrom);
    int endIndex = text.indexOf(textEnd);

    String substring = text.substring(startIndex + textFrom.length(), endIndex);

    System.out.println(substring);
}

在你的组件中这样做：

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

      }

`