ngFor在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可觀察的結構看起來有些奇怪，您應該看看如何改進它，但是要在此處實現目標卻有些困難。 您是否要以1000ms的時間對其進行反跳並僅發射一次？

為了防止在模板中使用雙重訂閱，您還可以對模板進行一些更改：

<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>

Answer 2

您可以像這樣直接在* ngIf指令中設置異步操作的結果：

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

然后，無需第二個異步管道。

PS：永遠不要訂閱您的服務，請使用RxJs運算符。