Angular 5:使用异步管道进行搜索-显示加载指示器 [英] Angular 5: Search with Async Pipe - show loading indicator

问题描述

我正在Anglur 5中使用async实现搜索字段.当用户开始在搜索框中输入内容时，应该会显示加载指示符.并且当结果到达时，指示符应该被隐藏.

Im am implementing a search-field with async in Anglur 5. When the user begins typing in the search-box, the loading-indicator should show up. And when the results have arrived, the indicator should be hidden.

我尝试了方法，但是即使用户未输入任何内容，加载指示器也可见. 那么实现此目标的最佳方法是什么?

I tried this approach, but then loading indicator is visible, even if the user has not typed anything. So what is the best way to implement this?

我的模板:

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

组件:

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);
}

推荐答案

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

应该可以解决问题.

这篇关于Angular 5:使用异步管道进行搜索-显示加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！