离子2等待http响应

Question

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

所以，

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

问题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 。 在这里，您可以检查条件，例如data变量是否仍然为null或不为null。 如果它不为null，请显示它。 例如<p *ngIf="_data !== null">Show data : {{_data}}</p> 。 这不需要等待您的数据。 每当加载数据时，UI都会更新。

2. 仅加载前一页中的所有数据。 加载后，在.subscribe()使用navParams推送页面，然后进行渲染。 （这只是为了快速修改代码。）