angular - 订阅 Angular 2

Question

我希望我的 ngOnInit 函数做接下来的事情: - 使用 this.structureRequest.sendRequest() 对某些数据发出 http 请求，效果很好，在收到数据后使用 this.viewNodes() 函数开始查看它。 我使用 subscribe ，但它不起作用，我想我在 subscribe 功能上做错了。请帮助:)

1. HomeComponent.ts

   import {Component} from '@angular/core';
   import {Observable} from 'rxjs/Observable';
   import {StructureRequestService} from './StructureRequestService';
   
   
   export class Content {
   
   
   ok: boolean;
   content = [];
   }
   @Component({
   providers: [StructureRequestService],
   styleUrls: ['app/home/home.css'],
   templateUrl:'./app/home/homePageTemplate.html'
   
   })
   
   export class HomeComponent {
   contentArray = [];
   myRes: Content;
   showAssigned:boolean = false;
   showSubitems:boolean = false;
   showUsers:boolean = false;
   
   constructor(private structureRequest: StructureRequestService) {}
   
   ngOnInit() {
   this.structureRequest.sendRequest().subscribe( this.viewNodes());
   
   }
   
   viewNodes() {
   this.myRes = this.structureRequest.result;
   this.contentArray = this.myRes.content;
   this.showAssigned = true;
    }
    }
   

2.这里是http服务，http get正常，收到所有数据:

import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';

import {Observable} from 'rxjs/Observable';

@Injectable ()
export class StructureRequestService {
result: Object;
//private myUrl = 'http://manny.herokuapp.com/audit/get/structure';
private myUrl = './app/home/nodes.json';  // local URL to structure APi
constructor (private http: Http) {
    //use XHR object
    let _build = (<any> http)._backend._browserXHR.build;
    (<any> http)._backend._browserXHR.build = () => {
        let _xhr =  _build();
        _xhr.withCredentials = true;
        return _xhr;
    };
}

sendRequest() {
    let body = JSON.stringify({});
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({
        headers: headers
    });
     this.http.get(this.myUrl, options)
        .map((res: Response) => res.json())
        .subscribe(res => {this.result = res;
            return this.result; });
}
}

3.so 问题是同步步骤:接收数据，而不是查看数据。

Answer 1

您可能希望在请求返回值时执行 this.viewNodes 而不是执行 this.viewNodes() 的结果

这个

this.structureRequest.sendRequest().subscribe( this.viewNodes());

应该改为

this.structureRequest.sendRequest().subscribe(() => this.viewNodes());

前者执行this.viewNodes()并将结果传递给subscribe()，后者创建一个新的内联函数传递给subscribe( )。此内联函数在调用时执行 this.viewNodes()

如果你想传递值 sendRequest() 返回它应该是

this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result));

更新

sendReqeust() 不返回任何内容。

应该是

return this.http.get(this.myUrl, options) ...

但这仅在返回 Observable 时才适用于您在代码中使用它的方式。

但最后的 subscribe() 返回一个 Subscription

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .subscribe(res => {this.result = res;
        return this.result; });

因此应该改为

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .map(res => {
      this.result = res;
      return this.result; 
    });

或

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .do(res => {
      this.result = res;
    });

区别在于 do() 不会修改流的值，也不需要返回任何东西。从 .map() 返回的值将被转发。如果要使用 do，请确保已导入(如 map)。