在 Angular 9 中过滤广播的属性答案

【问题标题】：Filter a broadcasted property in Angular 9在 Angular 9 中过滤广播的属性
【发布时间】：2020-11-25 00:21:09
【问题描述】：

我有一个调用数据库的 dbService！

//数据库服务代码-----------

 private changedEvents = new BehaviorSubject<IEvent[]>(null);
  broadCastEvents = this.changedEvents.asObservable();

  getEvents() {
    this.http.get<IEvent[]>(this.configUrl + 'Event/GetEvents').subscribe(
      (data: IEvent[]) => {
        this.changedEvents.next(data)
      });
  }

在我的 ngOnInit 组件中，我开始收听这个

  ngOnInit(): void {
    this.dbService.broadCastEvents.subscribe(data => {
      this.events = data;
    })
   // this.dbService.getEvents();
  }

现在所有这一切都像魅力一样！但现在我只对 this.events.type == 2 的记录感兴趣

我尝试了如下标准过滤！

  ngOnInit(): void {
    this.dbService.broadCastEvents.subscribe(data => {
      this.events = data.filter(event => event.eventTypeRefId == 2);
    })
   // this.dbService.getEvents();
  }

但它会导致以下错误！？任何想法如何以更好的方式实现这一点（有效:-)）

core.js:6241 ERROR TypeError: Cannot read property 'filter' of null
    at SafeSubscriber._next (start-training.component.ts:26)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at BehaviorSubject._subscribe (BehaviorSubject.js:14)
    at BehaviorSubject._trySubscribe (Observable.js:42)
    at BehaviorSubject._trySubscribe (Subject.js:81)
    at BehaviorSubject.subscribe (Observable.js:28)
    at Observable._subscribe (Observable.js:76)

【问题讨论】：

标签： arrays angular filtering broadcast

【解决方案1】：

有多种方法。一种方法是像您一样使用数组filter。其他方法是使用 RxJS filter 管道，如 @enno.void 所示。但是，当通知为null 时，这两种方法仍可能引发错误。而且由于你BehaviorSubject的默认值是null，很有可能再次遇到错误。

一种解决方法是使用 ReplaySubject 和缓冲区 1。它类似于BehaviorSubject，因为它保存/缓冲最后发出的值并在订阅时立即发出它，除非不需要默认值。因此减少了对初始 null 值的需求。

试试下面的

private changedEvents = new ReplaySubject<IEvent[]>(1);
broadCastEvents = this.changedEvents.asObservable();
...

现在，如果您将null 或undefined 推送到可观察对象，仍然可能会发生错误。因此，在过滤条件下，您也可以检查值的真实性。

ngOnInit(): void {
  this.dbService.broadCastEvents.subscribe(data => {
    this.events = data.filter(event => {
      if (event) {
        return event.eventTypeRefId == 2;
      }
      return false;
    });
  });
}

【讨论】：

工作就像一个魅力，我什至理解你的解释为什么它不起作用！非常感谢！！

【解决方案2】：

ngOnInit(): void {
  this.dbService.broadCastEvents.pipe(filter(event => event.eventTypeRefId == 2)).subscribe(data => {
    this.events = data
  })
 // this.dbService.getEvents();
}

参考： https://rxjs-dev.firebaseapp.com/guide/operators

【讨论】：