Ionic 2 wait http response

I have been looking around how could I make my code wait for the http request before move on, the reason that I need it is because I'm using the response to fill some variables in the html.

So,

Question 1: Do I really need to create a Service to make a http request and return a Promise/Observable?

Question 2: This is my code, couldn't I just do something here to make the code wait for the response?

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

          });
}

Thank you in advance for the help.

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>

More code about the .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: My console.log about the orders: