角度アプリケーションで購読する前に観測可能な結果を​​フィルタリングする

Question

私は、Output（）とEventEmitter（）を使用してAngularアプリケーションのイベントをあるコンポーネントから別のコンポーネントに渡す状況があります。私は実際にこのイベントを2回ダウンしています - なぜなら、3つのコンポーネントが関係しているからです。

その後、イベントが応答する必要があるコンポーネントから受信したとき、私はこの機能を使用しています：

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が表示されますが、新しい結果は生成されません。私はエラーが発生しません - それはデータがフィルタに基づいて変更されないことだけです。

ここに問題がありますか？エラーがなければどこに問題があるのか​​を知ることは難しいです。ところで

は、私の輸入は次のようになります。あなたはJavaScriptでそれを使用していたとして、あなたはrxjs filterを使用していることを

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

問題があります。

このケースでは、フィルタは特定の条件が失敗した場合にオブザーバブルをアンラップしてストリームを停止するだけで、配列に含まれている各項目を繰り返し処理しない限り反復しません。

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