angular2，RxJs 过滤可观察结果？答案

【问题标题】：angular2, RxJs filter observable results?angular2，RxJs 过滤可观察结果？
【发布时间】：2017-07-01 08:25:45
【问题描述】：

我正在调用一个服务并返回一个 json 对象。我想过滤结果，但似乎无法让它工作。该请求工作正常，我正在使用过滤器函数传入一个关键字。我试图通过控制台记录它，但它返回一个空数组。

提前致谢。

 let keywords = 'defunkt';

this.http.get('https://api.github.com/users')
  .map((res: Response) => res.json())
  .subscribe(
    data => {
      this.result = data,
        console.log(this.result.filter((keyword, index) => keywords.lastIndexOf(keyword) === index));
    },
    err => console.error(err),
    () => console.log('done')
  );

【问题讨论】：

你能用英语而不是代码描述你希望你的过滤器做什么吗？您想在他们的个人资料中找到具有特定关键字的用户吗？
您好，我希望能够搜索对象。例如，在我上面提到的端点中。所有 github 用户都有一个登录名。一旦我有了对象，我想传入一个搜索字符串并基于它返回另一个数组。在上面的代码中作为测试，我尝试传入一个关键字进行过滤，但我假设我可能必须展平数组或其他东西。
知道了。我已经在下面提交了答案。

标签： angular ecmascript-6 rxjs rxjs5

【解决方案1】：

这是一项服务，可让您通过登录名搜索 Github 用户：

@Injectable()
export class GithubSearchService {

  constructor(private http: Http) { }

  byLogin(query: string): Observable<any> {
    return this.http.get('https://api.github.com/users')
      .map(resp => resp.json())
      .mergeMap(val => val)  // <!-- this is important
      .filter((user: any) => user.login.includes(query));
  }

}

现在是使用此服务的代码：

export class AppComponent {

  constructor(private search: GithubSearchService) { }

  ngOnInit() {
    this.search.byLogin('van')
      .subscribe(results => console.log(results));
  }

}

几点说明：

在此实现中，过滤是在客户端上完成的。这意味着您不是在搜索所有 Github 用户，而只是通过 API 调用返回的用户（默认情况下似乎是 30 个用户）。 Github API 可能接受允许您在服务器上进行过滤的参数。
注意mergeMap() 运算符的使用。它让我展平 API 返回的用户数组，并让每个用户在 observable 中作为一个单独的值发出。我这样做是为了可以使用其他 RxJS 运算符单独操作（和过滤）每个用户，而不必处理一组用户。
我使用String.prototype.includes() 检查用户的登录是否包含给定的搜索查询（区分大小写的搜索）。由于这部分是纯 JS，因此您可以轻松地将其调整为按其他条件进行过滤。

【讨论】：

嗨@AngularFrance。这很好，感谢您回答这个问题。但是我想用服务之外的结果进行过滤，因为我将结果存储在 redux 存储中。我一直返回 undefined 但它不是... console.log("///", this.myStore.select('mykey') .subscribe(state => console.log(state) ));
嗨，吉米。根据您提供的一小段代码，很难为您提供帮助。你能提供一个 Plunkr 吗？