Angular 6 自动提示搜索框答案

【问题标题】：Angular 6 autosuggest search boxAngular 6 自动提示搜索框
【发布时间】：2019-05-21 13:22:47
【问题描述】：

我正在关注本教程 https://medium.com/@nacimidjakirene/angular-search-autosuggest-with-observables-6f42987f80e6，我想在 Angular 6 中进行操作。

如何将其转换为 Angular 6 兼容代码？

ngOnInit() {
    this.queryField.valueChanges
    .debounceTime(200)
    .distinctUntilChanged()
    .switchMap((query) =>  this._searchService.search(query))
    .subscribe( result => { if (result.status === 400) { return; } else {   this.results = result.json().artists.items; }
  });
  }
}

我自己转换了这个，但我在 this.logframe.searchEmployee(term).subscribe()

上有错误

ngOnInit() {
    this.registerationForm.valueChanges
    .pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap((term) => this.logframe.searchEmployee(term).subscribe()),
    );
  }

如果您对此有一些替代方案，请告诉我:)

编辑：解决了我的问题:)

我只需要通过获取特定的 formcontrol 来调整 Fan Cheung 代码，然后还添加 catcherror，这样它就不会在 404 on null 后完成

ngOnInit() {
    this.registerationForm.get('name').valueChanges
    .pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap((term) => this.logframe.searchEmployee(term).pipe(catchError(err => of('null')))),
    ).subscribe(
      val => console.log(val)
    );
  }

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

解决了我的问题:)

我只需要通过获取特定的 formcontrol 来调整 Fan Cheung 代码，然后还添加 catcherror 以便它不会在 404 on null 后完成

ngOnInit() {
    this.registerationForm.get('name').valueChanges
    .pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap((term) => this.logframe.searchEmployee(term).pipe(catchError(err => of('null')))),
    ).subscribe(
      val => console.log(val)
    );
  }

【讨论】：

【解决方案2】：

订阅返回Subscription 不能被switchMap 消费如果this.logframe.searchEmployee(term) 返回 Observable 然后试试下面的代码

ngOnInit() {
    this.registerationForm.valueChanges
    .pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap((term) => this.logframe.searchEmployee(term)),
    );
  }

【讨论】：