小编wct*_*ger的帖子

我有一个快速搜索框，我想要一个加载动画。我用ng-templatewithngIf来显示/隐藏这个动画。我有一些 li 嵌套在同一个 div 中，它使用异步管道订阅搜索结果 Observable 以显示结果。当*ngIf父 div上没有时，这个异步管道工作得很好，但是当我申请时它似乎不再订阅了ngIf。这是预期的行为吗？还是我做错了什么？

我的标记看起来像这样。

<input #searchBox type="text" (keyup)="itemLoading=true;searchTerm$.next(searchBox.value)"/>
<div *ngIf="!itemLoading else loading">
<!--Remove ngIf then items will display correctly when search-->
<!-- <div> -->
  <ul>
    <li *ngFor="let item of result$ | async ">{{item}}</li>
  </ul>
</div>
<ng-template #loading>
  <p>LOADING...</p>
</ng-template>

我正在使用 switchMap 来运行搜索：

private source = of(['apple', 'pear', 'banana']).pipe(delay(500));

  searchTerm$ = new Subject<string>();
  result$: Observable<string[]>;
  itemLoading = false;  

  constructor() {
    this.result$ = this.searchTerm$.pipe(
      tap(term => console.log('search term captured: …