Angular 如何防止更新搜索栏在发出新请求时取消以前的请求？

我有一个搜索栏，它根据id搜索事件。随着搜索栏中键入的数字越来越多，它会不断更新，以根据键入的部分id搜索事件。因此，当我停止键入时，我的最新结果会被以前的请求更新

例如。我通过键入12345进行搜索

结果显示为12345

然后通过1234的结果进行更新

然后通过123的结果进行更新

更新：

'''

导出类SearchComponent实现OnInit{
事件：事件[]
触发=错误
构造函数（私有eventService:eventService）{
}
恩戈尼尼特（）{
this.events=[]
}
searchForEvents（searchTerm）{
this.eventService.getEventsByPartAlid（searchTerm）
.subscribe（数据=>this.events=数据）
this.triggered=true
}
}

---

“”“

我认为如果您使用用于这些特定场景的标准RxJS操作符，您应该得到您想要的，例如：

map

-将

keyup

事件转换为可用于搜索的文本

debounceTime

-在做某事之前等待x毫秒。因此，如果用户在这些x毫秒内更改了任何内容，则不会对此进行解释

distinctUntilChanged

-检查该值是否在x ms内发生了实际更改

点击

-在实际进行API调用之前设置加载状态

switchMap

-将可观察对象的上下文切换到

http.get

调用的结果

catchError

-处理来自API的错误，以防万一

---

尝试一下：

import { Component, Injectable, ViewChild, ElementRef } from '@angular/core';
import { Observable, fromEvent, of } from 'rxjs';
import { map, distinctUntilChanged, debounceTime, tap, switchMap, catchError } from 'rxjs/operators';
import { SearchService } from './search.service';


@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  model: Observable<any>;
  searching = false;
  searchFailed = false;
  searchField$: Observable<any>;
  @ViewChild('input', { static: true }) input: ElementRef;

  constructor(private _service: SearchService) { }

  ngAfterViewInit() {
    this.searchField$ = fromEvent(this.input.nativeElement, `keyup`);
    this.model = this.searchField$.pipe(
      map(event => event.target.value),
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.searching = true),
      switchMap(term =>
        this._service.search(term).pipe(
          tap(() => this.searchFailed = false),
          catchError(() => {
            this.searchFailed = true;
            return of([]);
          }))
      ),
      tap(() => this.searching = false)
    );
  }
}

从'@angular/core'导入{Component，Injectable，ViewChild，ElementRef}；
从'rxjs'导入{Observable，fromEvent，of}；
从“rxjs/operators”导入{map、distinctUntilChanged、debounceTime、tap、switchMap、catchError}；
从“./search.service”导入{SearchService}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]，
})
导出类AppComponent{
型号：可供参考

我认为如果您使用用于这些特定场景的标准RxJS操作符，您应该得到您想要的，例如：

map
-将
keyup
事件转换为可用于搜索的文本
debounceTime
-等待x毫秒后再做某件事。因此，如果用户在x毫秒内更改了任何内容，则不会对其进行解释
distinctUntilChanged
-检查该值是否在x ms内发生了实际更改
点击
-在实际进行API调用之前设置加载状态
switchMap
-将可观察对象的上下文切换到
http.get
调用的结果
catchError
-处理来自API的错误，以防万一

尝试一下：

import { Component, Injectable, ViewChild, ElementRef } from '@angular/core';
import { Observable, fromEvent, of } from 'rxjs';
import { map, distinctUntilChanged, debounceTime, tap, switchMap, catchError } from 'rxjs/operators';
import { SearchService } from './search.service';


@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  model: Observable<any>;
  searching = false;
  searchFailed = false;
  searchField$: Observable<any>;
  @ViewChild('input', { static: true }) input: ElementRef;

  constructor(private _service: SearchService) { }

  ngAfterViewInit() {
    this.searchField$ = fromEvent(this.input.nativeElement, `keyup`);
    this.model = this.searchField$.pipe(
      map(event => event.target.value),
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.searching = true),
      switchMap(term =>
        this._service.search(term).pipe(
          tap(() => this.searchFailed = false),
          catchError(() => {
            this.searchFailed = true;
            return of([]);
          }))
      ),
      tap(() => this.searching = false)
    );
  }
}

从'@angular/core'导入{Component，Injectable，ViewChild，ElementRef}；
从'rxjs'导入{Observable，fromEvent，of}；
从“rxjs/operators”导入{map、distinctUntilChanged、debounceTime、tap、switchMap、catchError}；
从“./search.service”导入{SearchService}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]，
})
导出类AppComponent{
型号：可供参考

您需要添加实际代码…使用switchMap。请参阅此处的示例：到目前为止您实现了什么？您是否有一些示例代码可供使用？请注意，发生这种情况的原因正是因为您在发出新请求时没有取消上一个请求。如果在发送12345请求时取消了1234请求，则1234的结果永远不会出现，也不会替换12345的结果。您需要添加实际代码…使用switchMap。请参阅此处的示例：到目前为止您实现了什么？您是否有一些示例代码可以使用？请注意，发生这种情况的原因正是因为在发出新请求时您没有取消以前的请求。如果1234的请求被取消当您发送12345的请求时，1234的结果将永远不会出现，并且不会替换12345的结果。