Javascript fromEvent运算符在“之后未触发”；“未找到项目搜索结果”； 我搜索一个项目 如果找不到项目（404），我会得到一个预期的错误 同样，如果我尝试搜索一个新项目，则根本不会触发fromEvent

不知道为什么

fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
    tap(() => console.log('qorking')),
    map((event: any) => {
      if (event.keyCode === 17 || event.keyCode === 91 || event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40 || event.keyCode === 13 || event.keyCode === 27) {
        return;
      }
      return event.target.value;
    }),
    filter((query: any) => {
      if (!this.loading && (!query || query == '')) {
        this.searchedResult = [];
        return false;
      }
      return true;
    })
    , debounceTime(275)
    , distinctUntilChanged() // If previous query is different from current
    , switchMap(query => {
      if (query && query !== '') {
        query = query.trim();
        this.loading = true;
        return this.cartService.searchItemByName(encodeURIComponent(query), this.shopID.shop_id.toString());
      } else {
        this.searchedResult = [];
        this.loading = false;
        return EMPTY;
      }
    }),
    // subscription for response
).subscribe((res: any) => {
  this.searchedResult = [];
  let data = res.result;
  console.log('res', data);
  this.searchedResult = data;
  this.loading = false;
  if (data.length) this.setSelectedItem(data[0], 0);
}, (err) => {
  console.log('error', err);
  this.loading = false;
  this.searchedResult = [];
  this.toaster.error(err.error.message || "Something went wrong!");
})

---

我看到您在传递给这个可观察对象的操作符的函数中调用

this

的方法，这意味着当这个可观察对象发出事件时会触发一些副作用

我没有关于此代码如何改变世界状态的完整上下文，但有一种可能性是，在初始404发生后，订阅

keyup

事件的元素不再出现在页面上

---

这可能不会触发错误，因为可观察对象只是订阅了错误的元素。但是我需要更多地了解周围的环境，才能有信心地说出来。

正如您提到的，在404的情况下，您的错误回调被调用，因此，您的代码按照可观察设计的预期执行。根据可观察设计，如果可观察管道中发生错误（异常），则可观察管道处于错误状态，无法发出新值（），可以认为已完成[即无法发出新值]。因此，一旦发生错误，

keyup

事件不会触发

现在，为了在发生错误的情况下保持源observable活动（在您的情况下，使用

catchError

操作符处理observable中抛出错误的错误。在您的例子中，

this.cartService.searchItemByNam

方法返回一个可观察的。因此，让我们像这样更改您的代码：

fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
    tap(() => console.log('qorking')),
    map((event: any) => {
      if (event.keyCode === 17 || event.keyCode === 91 || event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40 || event.keyCode === 13 || event.keyCode === 27) {
        return;
      }
      return event.target.value;
    }),
    filter((query: any) => {
      if (!this.loading && (!query || query == '')) {
        this.searchedResult = [];
        return false;
      }
      return true;
    })
    , debounceTime(275)
    , distinctUntilChanged() // If previous query is different from current
    , switchMap(query => {
      if (query && query !== '') {
        query = query.trim();
        this.loading = true;
        return this.cartService.searchItemByName(encodeURIComponent(query), this.shopID.shop_id.toString())
.pipe(
  catchError(err => {
    console.log('error', err);
          this.toaster.error(err.error.message || "Something went wrong!");
          //in case of error let’s emit an empty array like you doing in other else conditions
          return of([]):
  })
);
      } else {
        this.searchedResult = [];
        this.loading = false;
        return EMPTY;
      }
    }),
    // subscription for response
).subscribe((res: any) => {
  this.searchedResult = [];
  let data = res.result;
  console.log('res', data);
  this.searchedResult = data;
  this.loading = false;
  if (data.length) this.setSelectedItem(data[0], 0);
}, (err) => {
  console.log('error', err);
  this.loading = false;
  this.searchedResult = [];
  this.toaster.error(err.error.message || "Something went wrong!");
})

希望能有帮助

---

顺便说一句，您的代码有很大的改进空间。

@ViewChild（“searchInput”）searchInput:ElementRef；这是输入搜索元素，在该元素上触发“keyup”事件以获取搜索项列表。以前没有这个问题。添加“switchMap”后，我面临着一个问题。如果在filter操作符之前和之后放置一个带有log语句的tap操作符，你会观察到什么？在我得到一个404响应以检查tap操作符之后，“keyup”事件不会触发。我不确定简单地添加一个switchMap怎么会导致上游源不再发射。如果您在元素上创建一个单独的keyup事件的可观察对象并订阅它，它是否在404之后继续发出？当您看到404错误时，是否调用了subscribe中提到的错误回调？我的意思是，你看到一条toastr消息通知错误了吗？console.log（'error'，err）执行了吗？@user2216584是的，调用了错误回调&toastr发出它。哦！知道了。来自myside的错误处理错误。非常感谢，现在开始工作了。是的，我是新来的&需要做很多改进/清理。欢迎您提出任何改进建议。