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

Posted 2023-03-13

【中文标题】Angular 5：使用异步管道搜索 - 显示加载指示器

【英文标题】：Angular 5: Search with Async Pipe - show loading indicator

【发布时间】：2018-09-11 13:11:11

【问题描述】：

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

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

我的模板：

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

【参考方案1】：

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

应该可以解决问题。

【讨论】：

更像finalize(() => this.searching = false)。

用空列表替换错误可能很危险，具体取决于上下文。假设您正在开发医疗保健软件并加载患者过敏症。如果请求失败，则向用户显示一个空列表，他们将其解释为没有过敏症的患者。您需要设计适合您的软件的错误处理策略。