我如何在console.log中显示一个可观察的值？

Question

我正在使用角度2和RxJS，我想知道如何做到以下几点：

在我的组件中，我定义了以下内容：

count: Observable<number>;

在我的组件的构造函数中，我正在执行以下操作：

constructor(
    private store: Store<any>
  ) {
    this.count = this.store.select<any>(state => state.count);
  }

如何查看计数的当前值？现在如果我console.log(this.count)我得到一个大对象来记录。如果我只想查看this.count的值，我该怎么做？

Answer 1

使用常规observable只会在更改时获取值，因此如果您想要在console.log中输出值，则需要在订阅中使用console.log：

constructor(
    private store: Store<any>
  ) {
    this.count = this.store.select<any>(state => state.count);
    this.count.subscribe(res => console.log(res));
  }

但是，如果您希望能够随时获得当前值，那么您将需要的是一个BehaviorSubject（它将函数中的Observable和Observer结合起来......从您执行Observable中将其从rxjs库中导入）。

private count:BehaviorSubject<number> = new BehaviorSubject<number>(0);

constructor(
    private store: Store<any>
  ) {
    let self = this;
    self.store.select<any>(state => self.count.next(state.count));
  }

然后，只要您想获得计数的当前值，就可以调用this.count.getValue()来更改您调用this.count.next(<the value you want to pass in>)的值。这应该可以帮到你找到你想要的东西。

Answer 2

对于RxJS的最新版本（AFAIR从6.0开始），正确的方法是使用.pipe()。要回答您的问题，您需要tap运算符。

constructor(
    private store: Store<any>
  ) {
    this.count = this.store.select<any>(state => state.count).pipe(
        tap(countValue => console.log('Count: ', countValue))
    );
  }

Answer 3

添加日志记录的最快方法是将 .pipe(tap(console.log)) 放在您的 observable 之后（在这种情况下在 this.store.select<any>(state => state.count) 之后）。如果您必须经常记录 observables，最好使用日志记录实用程序。我写了一个这样的实用程序1log：

import { log } from '1log';
import { timer } from 'rxjs';

timer(500).pipe(log).subscribe();