在Angular App中订阅之前过滤Observable的结果
问题描述:
我有一种情况,我使用Output()和EventEmitter()在我的Angular应用程序中将一个事件从一个组件传递到另一个组件。我实际上将这个事件传递了两次 - 因为涉及三个组件。在Angular App中订阅之前过滤Observable的结果
然后,当从需要响应组件接收的情况下,我使用这个功能:
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';
答
的问题是,你正在使用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';
有没有你不使用rxjs观测理由吗? –
我正在使用rxjs observables。 – Muirik
您是否已经导入'rxjs/add/operator/filter'? – unitario