在 Angular 应用中订阅前过滤 Observable 结果

Question

我有一种情况，我正在使用 Output() 和 EventEmitter() 将我的 Angular 应用程序中的事件从一个组件传递到另一个组件。我实际上将此事件传递了两次 - 因为涉及三个组件。

然后，当从需要响应的组件接收到事件时，我正在使用这个函数：

optionReceived(option, page) {
    console.log('Consulting page # is: ' + option.toolbarLabel);
    if (option.toolbarLabel && option.toolbarLabel === 'OT') {
        this.clientService.getByStage('consulting', 1, this.pagesize)
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
                this.page = page;
                console.log(this.records);
            },
            responseRecordsError => this.errorMsg = responseRecordsError);
        }
}

这按预期工作。然而，我真正想要的是根据通过 Output() 和 EventEmitter() 处理的点击事件传入的参数过滤这些结果。所以，就是说，我真的想要 与上面 完全相同的功能，但应用了过滤器，所以它看起来像这样：

optionReceived(option, page) {
    console.log('Consulting page # is: ' + option.toolbarLabel);
    if (option.toolbarLabel && option.toolbarLabel === 'OT') {
        this.clientService.getByStage('consulting', 1, this.pagesize)
            .filter(resRecordsData => resRecordsData.type && resRecordsData.type === 'OT')
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
                this.page = page;
                console.log(this.records);
            },
            responseRecordsError => this.errorMsg = responseRecordsError);
        }
}

现在这不起作用。当这个函数被触发时，我得到了上面期望的 console.log，但是没有生成新的结果。我没有收到错误 - 只是数据不会根据过滤器发生变化。

这里有什么问题？没有任何错误，很难知道问题出在哪里。

顺便说一句，我的导入是这样的：

import { Http } from '@angular/http';
import { ClientService } from '../../../data/client.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';

Answer 1

问题是您正在使用 rxjs filter，就像您在 javascript 中使用它一样。

在这种情况下，过滤器只是展开可观察对象并在特定条件失败时停止流，除非您指示它，否则它不会遍历数组中的每个项目。

要在订阅前过滤数组，请使用 map 运算符：

.map(resRecordsData => {
  let data = resRecordsData.data.filter(item => item.gender && item.gender === 'male');
  resRecordsData['data'] = data;
  resRecordsData['count'] = data.length;
  return resRecordsData
})

另外别忘了导入它：

import 'rxjs/add/operator/map';

在 Angular 应用中订阅前过滤 Observable 结果

Filtering Results of Observable Before Subscribing in Angular App

javascript

angular

eventemitter

angular2-observables