Ionic 2等待http响应

Question

我一直在环顾四周如何让我的代码等待http请求继续前进，我需要它的原因是因为我使用响应来填充html中的一些变量。

所以，

问题1：我真的需要创建一个服务，使HTTP请求，并返回一个无极/可观察？

问题2：这是我的代码，我不能在这里做点什么来让代码等待响应吗？

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

      }); 
} 

非常感谢您的帮助。

编辑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> 

有关的.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(); 
    } 

编辑2： 我的console.log有关订单：

Answer 1

问题1：我是否真的需要创建一个服务来发出http请求并返回一个Promise/Observable？

这真的取决于您的实施。在技​​术上，从相同的组件做http.post()应该没有什么区别。虽然，一些优势有一个共同的服务 -

1. 模块化的代码 - 作为服务的宗旨是给你的数据。特定组件的目的是仅处理该组件上的操作。

2. 再利用 - 如果服务是从具有更多或更少相同的行为不同的组分使用时，相同的服务可以重复使用，并使用参数操纵。

这是我的代码，不能我只是做一些东西在这里为了使代码等待响应？

.subscribe()的全部用途就是这样。您可以移动所有正在等待响应的代码。

至于你需要的html变量，我有2个解决方案给你。

1. 使用ngIf标签中的组件UI。在这里，你可以检查条件，如果data变量仍然为空或不为空。如果它不是空的显示它。例如。 <p *ngIf="_data !== null">Show data : {{_data}}</p>。这不需要等待您的数据。每当数据加载时，UI都会更新。

2. 只加载前一页中的所有数据。一旦它被加载，用navParams推入页面.subscribe()，然后渲染。 （这只是在你的代码快速修改。）