Angular2 Observables - 创建我自己的 - 订阅者未定义

Posted 2023-03-13

【中文标题】Angular2 Observables - 创建我自己的 - 订阅者未定义

【英文标题】：Angular2 Observables - Creating my own - subscriber undefined

【发布时间】：2016-09-20 01:48:08

【问题描述】：

我不能完全确定这是一个范围问题还是我如何设置我的 observables 的问题，但也许你可以提供帮助。

首先，我的逻辑。 我的总体目标是能够在发送 http.get 请求之前检查某些数据是否在本地保存。我想做的是返回本地保存的数据（如果存在），我认为我可以让它返回一个可观察的，这样我就可以订阅这个函数的输出，不管它返回的是本地数据还是远程数据.对此逻辑的任何想法将不胜感激！

我正在关注 this blog post by Cory Rylan 来实现我自己的 observable。我遇到了一个问题，我无法在 getData 函数中定义我的观察者。

Here is Cory's working demo

Here is my not-working demo - 您可以在日志中看到服务中的this._dataObserver 是未定义的，而在 Cory 中是未定义的。这就是导致我出现问题的原因。

以下是代码中的 sn-ps：

App.ts

@Component(
  selector: 'my-app',
  template: `
    <landing-page></landing-page>    
  `,
  providers: [DataService],
  directives: [LandingPageComponent]
)
export class App 
  constructor()  


bootstrap(App, [HTTP_BINDINGS])
  .catch(err => console.error(err));

LandingPageComponent.ts

@Component(
  selector: 'landing-page',
  template : `
    hello
  `,
)
export class LandingPageComponent implements OnInit
  data : Observable<any[]>;
  constructor(
    private _dataService : DataService
  )  

  ngOnInit() 
    this.data = this._dataService.data$;
    this._dataService.getData();
  

数据服务

@Injectable()
export class DataService 

   data$ : Observable<any[]>; // data stream
   private _baseUrl: string;
   private _dataObserver : Observer<any[]>;
   private _dataStore : 
    data : any[]
   ;

  constructor (
    private _http: Http
  ) 
    this._baseUrl  = 'http://56e05c3213da80110013eba3.mockapi.io/api';
    this.data$ =  new Observable(observer => this._todosObserver = observer).share();
    this._dataStore =  data: [] ;
  

  /** **************
  * Public functions
  *****************/

  getData () 
    this._http.get(`$this._baseUrl/todos`)
      .map(data => data.json())
      .subscribe( data => 
      this._dataStore.data = data;
      console.log(this._dataObserver);   //<------ This is undefined for me!
      this._dataObserver.next(this.data);
    ,
    error => 
      console.log('couldn\'t load data! ' + error );
    );

  

感谢您的意见

【参考方案1】：

_dataObserver 为 null，因为您没有订阅相关的 observable。不要忘记 observables 是惰性的......

您可以尝试以下方法：

ngOnInit() 
  this.data = this._dataService.data$.subscribe(data =>  // <-----
    console.log(data);
  );
  this._dataService.getData();

编辑

另外，你的代码有错别字：

this.data$ =  new Observable(observer => this._todosObserver = observer).share();

您应该使用_dataObserver 而不是_todosObserver：

this.data$ =  new Observable(observer => this._dataObserver = observer).share();

【讨论】：

不幸的是，在调用返回到landingPageComponent 之前，我收到了一个与 Observable 相关的错误。该服务无法调用this._dataObserver.next(this.data)，因为this._dataObserver 未定义。这与我将这行代码添加到组件之前遇到的错误相同。

也许这是一个错字，但在初始化 observable 时，您在代码中使用了 _todosObserver 而不是 _dataObserver。见new Observable(observer => this._todosObserver = observer).share()。

多么烦人，解决方案就是这么简单！谢谢蒂埃里，我显然需要一双新鲜的眼睛。如果您将此作为答案，我会接受。 编辑我也需要这样做，所以我将其标记为正确答案。谢谢！