在Angular App中订阅之前过滤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（）处理的click事件传入的参数来过滤这些结果。因此，所有这就是说，我真的希望有完全相同的功能，如上，但应用了过滤器，所以它看起来是这样的：

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中使用它。

在这种情况下，过滤器只是展开observable并停止流，如果某个条件失败，它将不会遍历数组中的每个项目，除非您将其导入。

要过滤阵列之前，订阅使用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';