I-Daten am Abrufen von API-Antwort,Ansicht ist, bevor API-Antwort-Rendering ist bereit, von abonnieren
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
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?
Wie sieht Ihre html aussehen? – echonax
Sie sollten lieber Ihre Ansicht so machen, dass sie nicht bricht, wenn die Daten noch nicht verfügbar sind, aber es ist schwierig, Vorschläge zu machen, ohne weitere Details darüber, wie Ihre Ansicht aussieht und welchen Fehler Sie erhalten. Anstatt 'subscribe()' können Sie '| async' pipe in der Ansicht. –
@ GünterZöchbauer aktualisierte Frage mit html –