Angular 角度5：使用异步管道搜索-显示加载指示器

我正在Anglur 5中使用

async

实现一个搜索字段。当用户开始在搜索框中输入时，加载指示器应显示出来。当结果到达时，指示器应该隐藏起来

我尝试了这个，但是加载指示器是可见的，即使用户没有键入任何内容。 那么，实现这一点的最佳方式是什么

我的模板：

<mdl-textfield #searchBox (keyup)="search(searchBox.value)" type="text" placeholder="Nach Kurs, Beteuer, Studiengruppe suchen..."></mdl-textfield>
<!--[...]-->
<div *ngIf="courses$ | async as courses">
  <ng-container *ngIf="courses.length; else noItems">
      <app-course *ngFor="let course of courses" [course]="course" [addAble]="true"></app-course>
  </ng-container>
  <ng-template #noItems><em>Kein Ergebniss für "{{searchBox.value}}"</em></ng-template>
</div>

Kein Ergebniss für“{{searchBox.value}”

组成部分：

public courses$: Observable<Course[]>;
public searchCourseTerm = new Subject<string>();
public serachLoadingIndicator: boolean = false;

constructor(private courseService: CourseService) { }

gOnInit() {
  this.courses$ = this.searchCourseTerm.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap((term: string) => this.courseService.searchCourse(term)),
  );
}

search(term: string ){
  this.searchCourseTerm.next(term);
}

公共课程$：可见；
public searchCourseTerm=新主题（）；
public serachLoadingIndicator:boolean=false；
构造函数（私有courseService:courseService）{}
gOnInit（）{
this.courses$=this.searchCourseTerm.pipe(
去BounceTime（300），
distinctUntilChanged（），
switchMap（（术语：字符串）=>this.courseService.searchCourse（术语）），
);
}
搜索（术语：字符串）{
本课程表下一学期；
}

---

应该这样做。

更像是

finalize（（）=>this.search=false）

@estus我想说

this.courseService.searchCourse（term）

应该是

this.courseService.searchCourse（term）.pipe（catchError（（）=>of（[]））

，否则，如果搜索失败，管道将完全中断。根据上下文，用空列表替换错误可能会很危险。假设您正在开发医疗软件并加载患者过敏反应。如果请求失败，用户将看到一个空列表，他们会将其解释为没有过敏反应的患者。您需要设计适合您的软件的错误处理策略。

ngOnInit() {
  this.courses$ = this.searchCourseTerm.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true)
    switchMap((term: string) => this.courseService.searchCourse(term)),
    tap(() => this.searching = false)
  );
}