如何过滤Observable数组？

Question

我的方法从Firebase返回一个Observable数组。我决定过滤客户端而不是服务器中的数据。我的问题是，如果属性＆＃34;参加=真＆＃34;我想只获取数据。任何帮助或其他方法都非常感谢。非常感谢你。

以下方法从firebase实时数据库中获取数据

userEvents: Observable<any[]>;

getUserEvents(uid: string) {
this.userEvents = this.db.list(this.basePatheventsSaved, ref=> 
 ref.orderByChild('uid').equalTo(uid)).snapshotChanges().map((actions) => {
  return actions.map((a) => {
    const data = a.payload.val();
    const $key = a.payload.key;
    return { $key, ...data };
  });
});
return this.userEvents;
} 

下面的代码用于确定templaTe中使用的数据：

 userEvents: Observable<any[]>;
 constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId);
 }

Answer 1

您应该可以使用map和filter运算符，并结合Array.prototype.filter。如果我已正确理解您的数据，它应该是这样的：

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

userEvents: Observable<any[]>;

constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
  this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId)
    .map(items => items.filter(item => item.attending))
    .filter(items => items && items.length > 0);
}

首先，我们将数组过滤到只有attending为真的项目。 然后我们过滤掉任何空数组或空数组。

针对RXJS 6进行了更新：

import { pipe } from 'rxjs'; 
import { map, filter } from 'rxjs/operators';

userEvents: Observable<any[]>;

constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
  this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId)
    .pipe(
      map(items => items.filter(item => item.attending)),
      filter(items => items && items.length > 0)
    );
}

Answer 2

您不能对此使用rxjs过滤器方法，而是使用从observable接收的数组对象上的过滤器方法。

因此，如果你有一个Observable<any[]>，你会像这样过滤它：

import 'rxjs/add/operator/map';

this.userEvents.map( arr =>
           arr.filter( r => r.attending === true )
     )
     .subscribe( results => console.log('Filtered results:', results))

从rxjs 5.5开始，你应该直接在Observable上使用.pipe而不是.map：

 import { map } from 'rxjs/operators';

 this.userEvents.pipe( 
         map(arr =>
           arr.filter( r => r.attending === true )
         )
     )
     .subscribe( results => console.log('Filtered results:', results))