javascript - Angular App 订阅前 Observable 过滤结果

Question

在我的 Angular 应用程序中，我使用 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)
            .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';