Question

我想订阅一些从服务器获取的对象。但是第一次代码没有给我任何回报。订阅代码：

ngOnInit() {
    this.dataService.getEvents()
    .subscribe(
    (events) => {
      this.events = events;  
      console.log(events);   // when I try to get this is no problem it prints log to console (probably because event is var so it is not defined)  
      console.log(events[0].name); // it didn't see that property so I'm getting ERROR TypeError: Cannot read property 'name' of undefined          
    });        
  }

服务看起来像这样，我正在使用BehaviorSubject用于Observable：

 private eventChanged = new BehaviorSubject<any>([]);

  constructor(private http: HttpClient) { 
    this.refetch();
  }
  private refetch(): void {
    this.http.get<EventE[]>(this.baseUrl)
      .subscribe(events => {
        this.events = events;
         this.eventChanged.next(events);
      });
  }

  getEvents(): Observable<any> {
    return this.eventChanged.asObservable();
  }

如何避免此错误并仅订阅已定义

的事件

Answer 1

我只想添加一个过滤器来排除初始订阅中的未定义事件：

ngOnInit() {
    this.dataService.getEvents()
    .filter(events => events && events.length > 0)
    .subscribe(
    (events) => {
      this.events = events;  
      console.log(events);   // when I try to get this is no problem it prints log to console (probably because event is var so it is not defined)  
      console.log(events[0].name); // it didn't see that property so I'm getting ERROR TypeError: Cannot read property 'name' of undefined          
    });        
  }

Answer 2

您可以尝试使用Subject，而不是使用BehaviorSubject，而是首先不会有空数组触发初始订阅调用。

如果你需要使用BehaviorSubject，你可以在使用它之前检查null并使用它，所以

.subscribe(events => {
  if(events && events instanceof Array && events.length > 0){
    this.events = events;
    this.eventChanged.next(events);
  }
});

如何避免第一个未定义的订阅JavaScript RxJS

2 个答案: