角4可观测呼叫服务多次

Question

我想按国家搜索城市。

我有两个不同的共享组件:第一个用于乡村搜索，它发出选定的国家id，然后第二个共享组件获取这个国家id并传递给服务，但它不过滤城市并返回数据库中的所有城市。

当我调试rest服务时:如果我没有通过countryId，它就是工作并返回所有城市，但我传递countryId；稍后，countryId值更改(null或0)并返回整个城市。这风景怎么了。谢谢。

​

//Component
export class CitySharedComponent implements OnInit {

  cities = new Array<City>();
  searchTerm$ = new Subject<string>();
  public selectedCountryId = new BehaviorSubject(0);
  @Input() countryId: any;

  constructor(private service: CityService) { }

  ngOnInit() {
    this.service.search(this.searchTerm$, this.selectedCountryId.getValue(), 1)
      .subscribe(results => {
        this.cities = results;
      });
  }

  onKeyup(searchText: string) {
    if (searchText != null)
      this.searchTerm$.next(searchText);
  }


  ngOnChanges(changes: { [propName: string]: SimpleChange }) {
    if (changes['countryId']) {
      if (changes['countryId'].currentValue == null || changes['countryId'].currentValue == undefined) 
        changes['countryId'].currentValue = 0;
      this.cities = null;
      this.selectedCountryId.next(changes['countryId'].currentValue);
    }

  }
}

//Service
search(terms: Observable<string>, countryId, lang): Observable<City[]> {
    var headers = new Headers();
    headers.append('Authorization', `bearer ${this.auth_key}`);
    headers.append('Content-Type', 'application/json');
    return terms
      .distinctUntilChanged()
      .switchMap(term => this.http.get(`${this.url}/search/${countryId}/${lang}/${term}`, { headers })
        .map(data => data.json())
      )
  }

​

Answer 1

嗯，直接的错误是你没有订阅country id subject，这就是为什么当你从它发出新的值时没有改变的原因--只是没有人在听。您只需在ngOnInit()中选择第一个值并将其传递给search()。它永远不会改变。

除此之外，不要更改changes集合中的任何内容。更改不属于您的数据通常是个坏主意，因此将其视为只读集合。它可以做得更简单：this.selectedCountryId.next(changes['countryId'].currentValue || 0);。

更新

可以做得更简单。你不需要让你的服务知道任何可观察到的东西。让它只获取原始值。处理可观测数据是另一个问题。

//Component
export class CitySharedComponent implements OnInit {

  cities = new Array<City>();
  searchTerm$ = new Subject<string>();

  public selectedCountryId = new BehaviorSubject(0);

  // if you don't need to store this value for your component then
  // you can safely remove getter and this field.
  // just leave setter, it will be enough.
  private _countryId: any;

  @Input()
  get countryId: any {
    return this._countryId;
  }
  set countryId(value: any) {
    this._countryId = value;
    this.selectedCountryId.next(this._countryId || 0);
  }

  constructor(private service: CityService) { }

  ngOnInit() {
    this.searchTerm$.distinctUntilChanged().combileLatest(
        this.selectedCountryId.distinctUntilChanged(), (_term, _countryId) => {
            return {
                term: _term,
                countryId: _countryId
            }
        }
    )
    .switchMap(t => this.service.search(t.term, t.countryId, 1))
    .subscribe(results => {
      this.cities = results;
    }); // and of course do not forget to unsubscribe from this
  }

  onKeyup(searchText: string) {
    if (searchText != null)
      this.searchTerm$.next(searchText);
  }

}

//Service
search(term: string, countryId, lang): Observable<City[]> {
    var headers = new Headers();
    headers.append('Authorization', `bearer ${this.auth_key}`);
    headers.append('Content-Type', 'application/json');
    return this.http.get(`${this.url}/search/${countryId}/${lang}/${term}`, { headers })
        .map(data => data.json());
}

Answer 2

无法在代码中找到ngOnDestroy。你需要在毁灭中取消你的可观测值。