Angular 模板未在 RxJS 上更新 可观察到的变化

Question

我在一个 web 应用程序上工作，该应用程序包含一个输入字段作为搜索。 它的值被提供给返回带有数据数组的 Observable 的 Subject。 此数据在模板中呈现。 所有这些都有效。 没有的是，当没有任何结果时隐藏模板的结果部分。 对应的代码部分：

  private querySubject = new Subject<string>();
  ...
  public searchResult: Observable<XyzDTO[]> = this.querySubject.pipe(
    debounceTime(250),
    distinctUntilChanged(),
    switchMap((queryText) => {
      if (queryText.length > 2) {
        return from([this.xyzService.search(queryText)]);
      } else {
        return from([]);
      }
    })
  );

<ng-container *ngIf="searchResult | async as results">
  Results: {{results.length}}
    <mat-card *ngFor="let result of results" class="m-2" (click)="goToDetails(result.id)">
    ...

输入超过 2 个字符会使结果按预期显示。 但是，将字符数减少回 2 或更少不会改变视图。 调试显示return from([]); 正在被调用。 知道为什么模板不能正确更新吗？ 谢谢！

Answer 1

您的返回类型错误，字符长度 <= 2。使用of代替 to from 。

else {
        return of([]);
      }