首页 > 解决方案 > RxJs, Angular4+

问题描述

我有一个film对象,它有一个genre属性。我想在运行时在自定义下拉菜单中按类型获取电影FormControl

所以我定义new BehaviourSubject(<int>) genre,如果它会在运行时改变,在ngOnChanges()方法中获取值。之后它命中 API。但我想在此之前检查流派值。例如,如果genre.getValue = 0不调用 API。

示例代码如下。如何检查价值?

private _genre;
private selectedGenre = new BehaviorSubject(0);
@Input()
set genre(value: any) {
  this._genre = value;
  this.selectedGenre.next(this._genre);
}
films: any[];

ngOnInit() {
  this.selectedGenre.distinctUntilChanged().combineLatest(
      this.selectedGenre.distinctUntilChanged(), (_genre) => {
        return {
          genre: _genre
        }
      }
    )
    .switchMap(t => this.service.getFilmsByGenre(genre))
    .subscribe(result => {
      if (result) this.films = result;
    });
}

ngOnChanges(changes: { [propName: string]: SimpleChange }) {
  if (changes['genre']) {
    this.films = null;
    this.filmCtrl.setValue(null);
    this.selectedGenre.next(changes['genre'].currentValue || 0);
  }
}

标签: angularrxjs

解决方案


您可以使用过滤器仅订阅那些您需要调用 API 的值。

this.selectedGenre.distinctUntilChanged().combineLatest(
      this.selectedGenre.distinctUntilChanged(), (_genre) => {
        return {
          genre: _genre
        }
      }
    )
    .filter(genre=>genre.getValue!==0)
    .switchMap(genre => this.service.getFilmsByGenre(genre))
    .subscribe(result => {
      if (result) this.films = result;
    });

推荐阅读