ngFor Observable 与 ngIf 中的异步管道不显示任何结果

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管道订阅的。一旦返回结果，可观察量就完成，并且*ngFor尝试订阅已经完成的可观察量，该可观察量不会重播它的最后一次发出。您可以通过添加shareReplay(1)管道来解决此问题：

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

整个searchTerm可观察的结构看起来有点奇怪，你应该看看如何改进它，但很难看出你想要在那里实现什么。你是否试图将其去抖动 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>