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

在Angular App中订阅之前过滤Observable的结果

1 个答案: