angular - 在 ngIf 中使用异步管道的 ngFor Observable 不显示任何结果

Question

我有一个不显示结果的下拉列表输入。它在带有异步的 ngIf 中。当我删除 ngIf 代码时会显示下拉列表，所以我认为它必须是 ngIf 检查或我如何设置测试可观察服务。当我按下输入 1 个值的键时，没有任何显示，当我第二次输入一个键时，它会显示列表。

<div class="format-options" *ngIf="(definitions | async)?.length > 0">
  <div *ngFor="let definition of definitions | async" class="search-result">
    <div>{{definition.name}}</div>
    <div>{{definition.description}}</div>
  </div>
</div>

搜索服务:

searchTerm(term: string): Observable<Array<ObjectDefinition>>

    let observer = new Observable<Array<ObjectDefinition>>((subscription) => {

      const timer$ = interval(1000);

      timer$.subscribe(() => {
        console.log('timer 1 second');
        subscription.next(this.objectDefinitions);
        subscription.complete();
      });

    });

    return observer;
}

组件:

constructor(private definitionService: DefinitionService) {
    this.definitions = this.searchInput.valueChanges
                        .pipe(
                            tap(value => console.log('input')),
                            //startWith(''),
                            debounceTime(500),
                            //distinctUntilChanged(),
                            switchMap(value => this.definitionService.searchTerm(value))
                        );
  }

Answer 1

我猜第一个 *ngIf 通过 async 管道订阅。一旦返回结果，observable 完成，并且 *ngFor 尝试 susbcribe 到一个已经完成的 observable，它不会重播它的最后一次发射。您可以通过添加 shareReplay(1) 管道来解决此问题:

this.definitions = this.searchInput.valueChanges.pipe(
  tap(value => console.log('input')),
  debounceTime(500),
  switchMap(value => this.definitionService.searchTerm(value)),
  shareReplay(1)
);

虽然整个 searchTerm observable 看起来有点奇怪，您应该看看如何改进它，但是很难看到您想要在那里实现什么。您是否尝试将其去抖 1000 毫秒并且只发射一次？

要防止在模板中使用双重订阅，您还可以稍微更改一下模板:

<ng-container *ngIf="definitions | async as defs">
  <div class="format-options" *ngIf="defs.length > 0">
    <div *ngFor="let definition of defs" class="search-result">
      <div>{{definition.name}}</div>
      <div>{{definition.description}}</div>
    </div>
  </div>
</ng-container>