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

【问题标题】：Why cannot set value in subscribe method?为什么不能在订阅方法中设置值？
【发布时间】：2021-02-15 12:42:23
【问题描述】：

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

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

【问题讨论】：

你的 .subscribe(... 设置 this.isLoading = false; - 所以当然微调器没有加载
我应该在subscribe()方法之后设置它吗？
在您将 isLoading 设置为 true 而不是内部 subscribe 的管道开头添加一个 tap 运算符，这使得分配即时且微调器无法识别。
我不知道你的加载应该什么时候开始或结束，所以我真的不能帮你。
@BerkKurkcuoglu 您好，Berk，您可以使用给定的代码发布它吗？

标签： javascript angular typescript rxjs observable

【解决方案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;
  });
}

【讨论】：

完美...非常感谢。什么水龙头操作员具体做什么或使用？
Tap 之前被称为'do'，在这种情况下它只是执行一个类似副作用的功能，而不会对管道链进行任何真正的改变。