angular - 向 Angular App 添加加载功能

Question

每当我在应用程序的搜索栏上键入内容时，我都会尝试实现加载。但似乎只有第一个“tap”函数被调用并将加载值设置为 true。我最终没有将 true 设置为 false。关于我应该如何做到这一点的任何帮助/建议？

沿用了这种做法。

import { Component, OnInit } from '@angular/core';
import { CourseService } from './course-service';

import { Observable, BehaviorSubject, combineLatest, Subject, from } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, tap, finalize } from 'rxjs/operators';

@Component({
  selector: 'explore',
  templateUrl: './explore.component.html'
})

export class ExploreComponent implements OnInit {
  loading: boolean = false;

  private searchString$ = new Subject<string>();
  courses$: Observable<any[]>;

  constructor(private ar: ActivatedRoute, public cs: CourseService) {
  }

  ngOnInit() {
    this.courses$ = this.searchString$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.loading = true),
      switchMap((term: string) => this.cs.getCoursess(term)),
      tap(() => this.loading = false)
    );
  }

  search(text: string) {
    this.searchVal = text;
    this.searchString$.next(text);
  }
}

标签： angulartypescript

Answer 1

尝试做

this.courses$ = this.searchString$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      ,do( () => this.loading = true)
      switchMap((term: string) => this.cs.getCoursess(term)),
      ,do( () => this.loading = false )
    );