이오니아 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에 대한

더 코드 :

: 내 CONSOLE.LOG 주문에 대한 2

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

편집

Answer 1

질문 1 : http 요청을하고 약속/관찰 가능 여부를 확인하려면 서비스를 만들어야합니까?

이것은 실제로 구현에 따라 다릅니다. 같은 구성 요소에서 http.post()을 수행하면 기술적으로 차이가 없어야합니다. 하지만 공통 서비스를 사용하는 데있어 몇 가지 장점이 있습니다. -

1. 모듈 식 코드 - 서비스 목적은 데이터를 제공하는 것입니다. 특정 구성 요소의 목적은 해당 구성 요소의 작업 만 처리하는 것입니다.

2. 재사용 - 서비스가 다소 다른 동작으로 다른 구성 요소에서 사용될 경우 동일한 서비스를 매개 변수를 사용하여 재사용하고 조작 할 수 있습니다.

이 난 그냥 응답에 대한 코드 대기를 만들기 위해 여기에 뭔가를 할 수없는, 내 코드?

.subscribe()의 모든 목적을위한 것입니다. 응답을 기다리고있는 모든 코드를 이동할 수 있습니다.

필요한 html 변수는 두 가지 해결책이 있습니다. 태그 구성 요소의 UI에서

1. 사용 ngIf. 여기에서 data 변수가 여전히 null이거나 null이 아닌 것과 같은 조건을 확인할 수 있습니다. null이 아닌 경우 표시하십시오. 예 : <p *ngIf="_data !== null">Show data : {{_data}}</p>. 이렇게하면 데이터를 기다릴 필요가 없습니다. 데이터가로드 될 때마다 UI가 업데이트됩니다.

2. 이전 페이지의 모든 데이터를로드하십시오. 페이지가로드되면 navParams을 .subscribe()에 넣은 다음 렌더링합니다. 와 (이건 그냥 코드에서 빠른 수정을 위해이었다.) 나는 ngIf 사용하는 경우 그것은 나를 위해 작동하지 않는 몇 가지 이유를 들어