为什么不能在订阅方法中设置值？

Question

我试图通过设置一个值来显示微调器，但是虽然在设置该值时显示了它，但是在订阅方法中设置时却看不到它。这是正常行为吗？

search() {
  this.isLoading = true; //when setting at here spinner is working
  fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
    map((event: any) => { // get value
      return event.target.value;
    }),
    filter(res => res.length >= this.minLength),
    debounceTime(this.debounceTime),
    distinctUntilChanged()
  )
  .subscribe(text => {
    this.isLoading = true; //when setting at here spinner is NOT working
    this.demoService.setSubject(text);
    this.isLoading = false;
  });
}

Answer 1

您应该在事件开始时将 isLoading 设置为 true，而不是等待 rxjs 序列完成，当您在订阅中设置它时，只需在它几乎是一个原子操作之后将其设置为 false 2 行，这使得人眼无法识别的旋转器。

search() { 
  fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
    tap(() => this.isLoading = true),
    map((event: any) => { // get value
      return event.target.value;
    }),
    filter(res => res.length >= this.minLength),
    debounceTime(this.debounceTime),
    distinctUntilChanged()
  )
  .subscribe(text => {     
    this.demoService.setSubject(text);
    this.isLoading = false;
  });
}

为什么不能在订阅方法中设置值？

Why cannot set value in subscribe method?

javascript

observable

rxjs

typescript

angular