Question

每当我在应用程序的搜索栏中键入内容时，我都试图实现加载。但是似乎只有第一个“ tap”函数被调用并将加载值设置为true。我最终将true设置为false。有关如何执行此操作的任何帮助/建议？

遵循此approach。

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

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

向Angular App添加加载功能

1 个答案: