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

问题描述

我正在 Anglur 5 中使用 async 实现一个搜索字段.当用户开始在搜索框中输入时，加载指示器应该会出现.当结果到达时，指标应该被隐藏.

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

我的模板:

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

组件:

public course$: Observable;public searchCourseTerm = new Subject();公共 serachLoadingIndicator: boolean = false;构造函数(私人课程服务:课程服务){}gOnInit() {this.courses$ = this.searchCourseTerm.pipe(去抖动时间(300)，distinctUntilChanged(),switchMap((term: string) => this.courseService.searchCourse(term)),);}搜索(术语:字符串){this.searchCourseTerm.next(term);}

解决方案

ngOnInit() {this.courses$ = this.searchCourseTerm.pipe(去抖动时间(300)，distinctUntilChanged(),tap(() => this.searching = true)switchMap((term: string) => this.courseService.searchCourse(term)),tap(() => this.searching = false));}

应该可以解决问题.

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?

My Template:

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

The Component:

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

should do the trick.

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