Angular 如何过滤可观察到的数据？

我正在使用firebase的ngbootstrap typeahead组件

我正试图找出如何根据返回的所有文档的名字过滤可观察结果

遇到错误：

[ts]属性“pipe”在类型“Promise”上不存在。[2339]

async  getAllContacts(term){
    let res = this.contactService.getAllContacts();

    return await res.filter(v => v.firstname.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)
  }
  search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term =>
      this.getAllContacts(term).pipe(
        catchError(() => {
          return of([]);
        }))
    ),
  )

异步getAllContacts（术语）{ 设res=this.contactService.getAllContacts（）； return await res.filter（v=>v.firstname.toLowerCase（）.indexOf（term.toLowerCase（））>-1） } 搜索=（文本$：可观察）=> 文本$.pipe( 去BounceTime（300）， distinctUntilChanged（）， 开关映射（术语=> 此.getAllContacts（术语）.pipe( 捕获错误（（）=>{ 归还（[]）； })) ), ) 我做错了什么？

换成

   switchMap(term =>
      from(this.getAllContacts(term)).pipe(
        catchError(() => {
          return of([]);
        }))
    ),

更新

如果

getAllContacts

返回observable，请将方法更改为下面的方法，并从上面的旧答案中删除from（）运算符

getAllContacts(term){
    return this.contactService.getAllContacts().pipe(map(res=>
    res.filter(v =>v.firstname.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)
))
}

改为

   switchMap(term =>
      from(this.getAllContacts(term)).pipe(
        catchError(() => {
          return of([]);
        }))
    ),

更新

如果

getAllContacts

返回observable，请将方法更改为下面的方法，并从上面的旧答案中删除from（）运算符

getAllContacts(term){
    return this.contactService.getAllContacts().pipe(map(res=>
    res.filter(v =>v.firstname.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)
))
}

---

我在上面的代码中看到了许多问题。范已经指出了从承诺到可观察的错误，但是当这一个问题解决后，下一个问题出现了

在我看来，第二个问题可能是在同一个代码中混合了rxjs版本——您从不同的位置复制并粘贴了它吗？res.filter会在旧的rxjs语法中调用

filter

操作符，但在v6+中，该语法已经更改，现在以不同的方式调用filter<代码>切片甚至更旧，回到rxjs v4（现在被下面代码中的skip和take-note组合所取代，我删除了skip，因为它将是skip（0），它不起任何作用）

因此，如果

filter

和

slice

是结果可观察对象上的运算符，那么rxjs6版本的将看起来完全不同

如果所有这些都发生了，那么您可以将代码更改为：

async getAllContacts(term) {
  let res = this.contactService.getAllContacts();

  return await res.pipe(filter(v => v.firstname.toLowerCase().indexOf(term.toLowerCase()) > -1),take(10))
}
search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term =>
    from(this.getAllContacts(term)).pipe(
      catchError(() => {
        return of([]);
    }))
  ),
)

---

我在上面的代码中看到了许多问题。范已经指出了从承诺到可观察的错误，但是当这一个问题解决后，下一个问题出现了

在我看来，第二个问题可能是在同一个代码中混合了rxjs版本——您从不同的位置复制并粘贴了它吗？res.filter会在旧的rxjs语法中调用

filter

操作符，但在v6+中，该语法已经更改，现在以不同的方式调用filter<代码>切片甚至更旧，回到rxjs v4（现在被下面代码中的skip和take-note组合所取代，我删除了skip，因为它将是skip（0），它不起任何作用）

因此，如果

filter

和

slice

是结果可观察对象上的运算符，那么rxjs6版本的将看起来完全不同

如果所有这些都发生了，那么您可以将代码更改为：

async getAllContacts(term) {
  let res = this.contactService.getAllContacts();

  return await res.pipe(filter(v => v.firstname.toLowerCase().indexOf(term.toLowerCase()) > -1),take(10))
}
search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term =>
    from(this.getAllContacts(term)).pipe(
      catchError(() => {
        return of([]);
    }))
  ),
)

---

您似乎得到的是承诺，而不是可观察的。您似乎得到的是承诺，而不是可观察的。立即获取此错误：

res.filter不是函数

此.contactService.getAllContacts（）的返回类型是什么现在出现此错误：

res.filter不是一个函数

this.contactService.getAllContacts（）的返回类型是什么？我正在使用angular fire store，尝试检索所有文档，然后使用类型先行筛选结果。@JustinYoung鉴于您正在尝试实现筛选器，我用可能的代码简化更新了我的答案。我正在使用angular fire store，我正在尝试检索所有文档，然后使用类型预检来过滤结果。@JustinYoung鉴于您正在尝试实现过滤器，我用可能的代码简化更新了我的答案。