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()不应该有任何区别。虽然，有一个共同服务的一些优点是 -

模块化代码 - 因为在服务中的目的是为您提供数据。特定组件的目的是仅处理该组件上的操作。
重用 - 如果要从具有或多或少相同行为的不同组件中使用服务，则可以使用参数重用和操作相同的服务。

这是我的代码，我不能在这里做些什么来让代码等待响应？

.subscribe()的全部目的就是为此。您可以移动等待响应的所有代码。

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

在标记中的组件UI中使用ngIf。在这里，您可以检查条件，例如data变量是否仍为null或不为null。万一它不是null显示它。例如。 <p *ngIf="_data !== null">Show data : {{_data}}</p>。这不需要等待您的数据。每当数据加载时，UI都会更新。
仅加载上一页中的所有数据。加载后，在navParams中使用.subscribe()推送页面，然后进行渲染。（这只是为了快速修改代码。）

Ionic 2等待http响应

1 个答案: