时间戳

首页 > 解决方案 > Angular 模板未在 RxJS 可观察更改上更新

javascript - Angular 模板未在 RxJS 可观察更改上更新

问题描述

我在一个包含输入字段作为搜索的 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([]);正在调用。知道为什么模板不能正确更新吗？谢谢！

标签： javascriptangularrxjs

解决方案

您的返回类型错误，字符长度 <= 2。请of改用from.

else {
        return of([]);
      }

推荐阅读