typescript - Ionic 2 așteaptă răspunsul HTTP

Am căutat cum aș putea face codul meu să aștepte cererea HTTP înainte de a continua, motivul pentru care am nevoie de asta este că folosesc răspunsul pentru a completa câteva variabile în HTML.

Deci,

Întrebarea 1: Trebuie să creez cu adevărat un serviciu pentru a face o cerere http și a returna un Promise/Observable?

Întrebarea 2: Acesta este codul meu, nu aș putea să fac ceva aici pentru ca codul să aștepte răspunsul?

let link = 'http://working url';
      let headers = new Headers({
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': '*/*'
      });

      let options = new RequestOptions({headers: headers});

      this.http
          .post(link, this.loginString, options)
          .map(res => res.json())
          .subscribe(
              data => {
                  let response = JSON.parse(data);
                  if(response.Successfull){
                      if(response.ReturnObject.length>0){
                          this.orders = this.orderJson(response.ReturnObject);
                          this.ordersWithoutGroup = response.ReturnObject;
                          this.empty = false;

                      }else{
                          this.orders= [];
                          this.empty= true;
                      }
                  }

          }, err => {
              this.showAlertError();
          }, () => {
              this.loadingPopup.dismiss()

          });
}

Mulțumesc anticipat pentru ajutor.

EDIT 1: HTML:

<ion-content class="stable-bg" scroll="true">
 <div class="item-input-inset">
     <label class="item-input-wrapper">
         <i class="icon ion-ios-search placeholder-icon"></i>
         <input type="text" placeholder="Search Orders" ng-model="search">
     </label>
 </div>
 <ion-list *ngIf="orders !== null" ng-repeat="(date, group) in orders">
     <ion-item class="item-divider">{{ date }}</ion-item>
     <ion-item class="item-icon-left item-icon-right" ng-repeat="order in group" (click)="goToDetail(order.ID)">
         <div ng-show="order.DocumentNumber.indexOf(search) >-1 || !search ">
             <i class="icon ion-card"></i>
             <div>Nº {{ order.DocumentNumber }}
                 <span class="gray pull-right">{{ order.time }}</span>
             </div>
             <i class="icon ion-ios-arrow-right"></i>
         </div>
     </ion-item>
 </ion-list>
 <div ng-show="empty">
     <div class="card">
         <div class="item item-text-wrap ion-information-circled" (click)="check()">At the moment there isn't any order to
approve.</div>
     </div>
  </div> 
</ion-content>

Mai mult cod despre .ts:

import { Component , OnInit, Injectable} from '@angular/core';
import { NavController, AlertController, LoadingController } from 'ionic-angular';
import { Http, Headers, RequestOptions} from '@angular/http';
import * as moment from 'moment';


@Injectable()
@Component({
selector: 'page-orders',
templateUrl: 'orders.html'
})
export class OrdersPage implements OnInit{

    orders: any;
    loginString: any;
    empty: boolean;
    ordersWithoutGroup: any;
    loadingPopup: any;;

constructor(public navCtrl: NavController,private alertController: AlertController,  private http: Http, private loadingCtrl: LoadingController) {
 this.loadingPopup = this.loadingCtrl.create({
  content: 'Loading orders...'
});

// Show the popup
this.loadingPopup.present();
  this.orders= {}
  this.loginString = localStorage.getItem("Auth");

}

ngOnInit() {
        this.getOrders();
    }

EDIT 2: Consola mea.log despre comenzi:

Răspuns #1

Întrebarea 1: Este chiar necesar să creez un Serviciu pentru a face o cerere http și a returna un Promise/Observable?

Acest lucru depinde cu adevărat de implementarea ta. Efectuarea http.post() din același component nu ar trebui să facă nicio diferență, tehnic vorbind. Totuși, câteva avantaje de a avea un serviciu comun sunt -

  1. Cod modular - Așa cum scopul unui serviciu este să îți ofere date, scopul unui component particular este să gestioneze operațiunile doar asupra acelui component.

  2. Reutilizare - Dacă un serviciu urmează să fie folosit de la diferite componente cu un comportament mai mult sau mai puțin identic, același serviciu poate fi reutilizat și manipulat folosind parametri.

Acesta este codul meu, nu aș putea să fac ceva aici pentru ca codul să aștepte răspunsul?

Întregul scop al .subscribe() este pentru asta. Poți muta tot codul tău care așteaptă răspunsul în acesta.

Cât despre variabilele html de care ai nevoie, am 2 soluții pentru tine.

  1. Folosește ngIf în interfața componentelor în tag-uri. Aici, poți verifica condiții, cum ar fi dacă variabila data este încă nulă sau nu. În cazul în care nu este nulă, afișeaz-o. De exemplu, <p *ngIf="_data !== null">Arată datele : {{_data}}</p>. Nu este nevoie să aștepți datele. Ori de câte ori datele se încarcă, UI-ul se va actualiza.

  2. Încarcă toate datele de pe pagina anterioară doar. Și odată ce sunt încărcate, trimite pagina cu navParams în .subscribe() și apoi afișează. (Acesta a fost doar pentru modificare rapidă în codul tău.)