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([]);
      }