2017-08-11 5 views
0

私は、コードのこの部分を持っているAngular2/4 http.getにネストされたアクセス権を「本」

let headers = new Headers({ 'Authorization': `${this.user.Token}` }); 
     let options = new RequestOptions({ headers: headers }); 
     this.http.get(environment.apiRoot + 'Customers/Customer/Search/' + term + '/' + value, options) 
      .map((response) => { 
       var Data = response.json().Data; 
       return Data; 
      }).subscribe(Data => { 
       this.data.customer.emailAddress = Data.EmailAddress; 
       this.data.customer.phoneNumber = Data.PhoneNumber; 
       this.data.customer.firstName = Data.FirstName; 
       this.data.customer.lastName = Data.LastName; 
       this.data.customer.streetAddress = Data.StreetAddress; 
       this.data.customer.city = Data.City; 
       this.data.customer.state = Data.State; 
       this.data.customer.zipCode = Data.ZipCode; 
       this.data.customer.idNumber = Data.IDNumber; 
       this.data.customer.ID = Data.ID; 
       this.data.customer.comment = Data.Comment; 

       // //Check if customer has exsiting orders 
       this.http.request(environment.apiRoot + 'Orders/Order/Customer/' + Data.ID, options) 
        .subscribe(odResponse => { 
         var Data = odResponse.json().Data; 
         this.data.orders = Data; 
         this.existingOrders = Data.length > 0; 
        }, error => { 
         this.alertService.error('Encountered an error while trying to get customer order data'); 
        }); 
      }, error => { 
       this.alertService.error('Encountered an error while trying to get customer data'); 
      }); 

最初は「GET」「this.data.customer行われたときに、私はに実行しています問題がありますデバッガの「this」がサブスクリプションであり、私のコンポーネントではないのに、2番目の「GET」が実行されたときに「this」がサブスクリプションであり、「this.data.order」が定義されていないと言っても"this.data"

だから、私はサブスクリプションではなくサブスクリプションであることをサブスクリプションでどのように取得するのですか?

+1

try this.data ['orders'] =データ。あなたが '' => '' – CruelEngine

+0

@krzosikを使っているときに、ここで '' this''は常にコンポーネントを指しています。 – Ksliman

+0

'Observable'(他の' http.get'の結果に基づいて 'http.get'を連想させる)を連鎖させたい場合は、' subscribe'の中で 'subscribe'ではなく' switchMap'を使うのが良いです –

答えて

0

Harryが示唆しているように、switchMapを使用して、サブスクリプティングの呼び出しの代わりに1つのsubscribe呼び出しを行う方が良いです。解決策に関しては、あなたが最初の呼び出し(ID)によって返されたデータが第2電話をかけることができるように要求しているようですので、私はこのアプローチを使用しました。この

let headers = new Headers({ 'Authorization': `${this.user.Token}` }); 
let options = new RequestOptions({ headers: headers }); 

this.http.get(environment.apiRoot + 'Customers/Customer/Search/' + term + '/' + value, options) 
     .map((response) => { // This extracts the data you require 
      var Data = response.json().Data; 

      return Data; 
     }).switchMap(Data => { // This returns the result of the second observable in 
      return this.http.request(environment.apiRoot + 'Orders/Order/Customer/' + Data.ID, options) 
          .map(odResponse => { // We have the response. Extract the json, and return an array with the first element as the old data, and the second element as the new data. 
           var _Data = odResponse.json().Data; 
           return [ Data, _Data ]; 
          }); 
     }).subscribe(data => { 
      let firstSet = data[0]; 
      let secondSet = data[1]; 
      // Now do your assignment 
      this.data.customer.emailAddress = firstSet.EmailAddress; 
      this.data.customer.phoneNumber = firstSet.PhoneNumber; 
      ... 
      ... 
     }); 

を試してみてください。そうでない場合は、Observable.forkJoinの使用をお勧めします。 ThisはRxJS V4のforkJoinのドキュメントですが、それでもV5に適用されます。

+0

私はこのアプローチを使い終わったので、私はそれを答えとして受け入れます!私の元のコードはこれははるかにクリーンです作品 – Ksliman