从订阅到可观察的未定义值

Question

我知道有很多关于这个问题的问题，但没有一个有助于解决我的问题。 从组件订阅服务，它总是返回 undefined.. 对此我失去了理智。

组件：

ngOnInit() {
  this.dataService.getAllPartners().subscribe(data => 
      {this.partners = data
        console.log("data " + data);},// i can see the data returns 
      error => {
      LoggerService.error('Failed to load partners.')
    });
    console.log("Partners " + this.partners);// partners is undefined 
  }

服务：

 private serviceUrl = '/partners';
 private headers = new HttpHeaders()
    .set('Content-Type', 'application/json');

    constructor(private httpClient: HttpClient) { }

    /**
   * Fetch  partners from the server
   */   
    getAllPartners(searchParams?: Object): Observable<Partner[]> {
      return  this.httpClient.get(Constants.BASE_SERVICE_URL + serviceUrl , {
        params: HttpRequestService.buildRequestOptions(searchParams),
        headers: this.headers
    })

}

Answer 1

所以基本上这行代码

console.log("Partners " + this.partners); 

在.subscribe里面的代码之前运行

   this.dataService.getAllPartners().subscribe(data => { 
    // What happens here is after the request has been processed
}

那是因为订阅是异步操作，需要一些时间，所以你需要在订阅里面做你的console.log。

请注意，订阅是长期有效的，需要像下面这样使用您的组件取消订阅。

import {  Subscription } from 'rxjs';

    private subscription : Subscription;
    ngOnInit() {
       this.subscription = this.dataService.getAllPartners().subscribe(data =>
            {this.partners = data;
                console.log("data " + data);}, 
            error => {
                LoggerService.error('Failed to load partners.')
            });

    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

但你也不应该像现在这样订阅。理想情况下，您应该使用模板内的| async 管道进行订阅，因为 Angular 将为您处理所有这些。

所以在你的组件中这样做

ngOnInit() {
           this.partners = this.dataService.getAllPartners();
        }

在你的模板中

<ng-container *ngFor="let partner of partners | async">
    // Your html markup for each partner here 
    {{partner.name}}
 </ng-container>