javascript - Angular 2 RxJS 过滤器到新的 observable

Question

我是 RxJS 的新手(使用 5.1.1)并尝试使用 angular-redux/store 在我的 Angular 2 应用程序中理解它。

我已经设置了一个商店，并努力在我的应用程序中获取我状态的不同部分。

现在，我正在尝试获取将 loaded 属性设置为 true 的 AppPart:

我的状态:

export interface IAppState extends IRootState{
  theme: Theme;
  config: IConfig;
  mainSubTitle: string;
  appParts: AppPart[];
}

选择:

@select(state => state.app.appParts) appParts$: Observable<AppPart>;

现在，我正尝试从这个可观察对象中获取过滤后的数组:

loadedAppParts = [];

ngOnInit() {
  this.appParts$.filter(a => a.loaded).subscribe(a => { console.log(a); this.loadedAppParts.push(a); });
}

但是，这会返回一个空数组。如果可能的话，我也希望能够使用异步管道来获取“loadedAppParts”，因此我也尝试执行以下操作:

loadedAppParts: Observable<AppPart> = new Observable<AppPart>();
ngOnInit() {
  this.loadedAppParts = this.appParts$.filter(a => a.loaded);
}

那么，我怎样才能从我的 Observable 状态中获取过滤后的数组或 observable？

忘记添加我的根状态:

export interface IRootState { };

和我的初始状态:

export const INITIAL_STATE: IAppState = {
  theme: THEMES.LightGreyBlue,
  config: <IConfig>{
    data: {
      apiUrl: ''
    },
    general: {
      appName: 'Default name',
      appShortName: 'default'
    }
  },
  mainSubTitle: 'Default',
  appParts: [new AppPart('core', true)]
};

以及显示要调试的 JSON 的模板部分(对于数组示例):

{{ appParts$ |异步 | json }} {{ loadedAppParts | json }}

当使用 Observable 时:{{ appParts$ |异步 | json }} {{ loadedAppParts |异步 | json }}

返回:[ { "name": "core", "loaded": true } ] null

Answer 1

在 JSON 输出中，您可以看到它如下所示:

[ { "name": "core", "loaded": true } ] null

所以 appParts$实际上是发射对象数组 ( Observable<AppPart[]> ) 而不仅仅是对象 ( Observable<AppPart> )。

然后当你使用 this.appParts$.filter(a => a.loaded)您正在尝试按 .loaded 过滤项目Array 对象上不存在的属性，因此它始终为空。

事实上，您想过滤该数组中的对象。换句话说，您需要将数组展平为单个项目。这意味着我们要改变这个:

[ { "name": "core", "loaded": true }, { "name": "core", "loaded": true }, { "name": "core", "loaded": true } ]

进入这个:

{ "name": "core", "loaded": true }
{ "name": "core", "loaded": true }
{ "name": "core", "loaded": true }

这就是 mergeAll() 的内容运营商可以做到。使用 mergeAll()在这种情况下与使用 merge(array => Observable.from(array)) 相同.

this.appParts$.mergeAll().filter(a => a.loaded);

现在当你用 .filter(a => a.loaded) 链接它时您正在过滤 AppPart对象。

注意使用async时过滤器它订阅 Observable 并始终仅呈现从源发出的最后一个项目。

您可以使用 toArray()再次将过滤后的项目收集到一个数组中:

this.appParts$.mergeAll().filter(a => a.loaded).toArray();

这有一个重要的后果。 toArray()运算符仅在源 Observable 完成后才发出(但这在您的用例中可能不是问题)。

或者，如果您只想收集所有元素，您也可以使用 scan()每次从源发出时发出集合的运算符(但是此运算符可能会导致多个 View 更新)。

this.appParts$.mergeAll().filter(a => a.loaded).scan((acc, item) => {
    acc.push(item);
    return acc;
}, []);