Javascript 在Angular App中订阅前可观察到的过滤结果

在我的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);
        }
}

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';

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

这里有什么问题？如果没有任何错误，就很难知道问题所在

顺便说一下，我的导入如下所示：

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);
        }
}

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';

---

问题在于，您使用的是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';

---

您不使用rxjs observables有什么原因吗？我使用的是rxjs observables。您是否导入了“rxjs/add/operator/filter”？请分享您的导入声明需要导入rxjs运算符才能正常工作。我将尝试此操作，谢谢。为了澄清，您的意思是用这个.map行替换筛选行，是吗？正确，如果出于任何原因不希望订阅发生，请使用

filter

。请尝试。不幸的是，它仍然不起作用。但我突然想到，也许问题是在调用.map时，它不知道它正在处理数组。对于.filter也可能是这样。因为只有在.map和.filter之后，“resRecordsData”才设置为“records”。想法？如果您在map操作符之前添加这个，您能分享您得到的结果吗：

.do（（log）=>console.log（log））

如果这按预期工作，那么map部分也应该如此。当我添加它时，我会将它打印到控制台：Object{count:4037，data:Array（12）}