读取参数，然后在 Angular 中查找单个元素

【问题标题】：Reading parameter and then finding single element in Angular读取参数，然后在 Angular 中查找单个元素
【发布时间】：2020-07-01 23:14:23
【问题描述】：

我有一个服务carriersService，方法是getAll()，它返回一个Observable<Carrier[]>。在我的组件中，我正在尝试读取路由参数carrierId，找到具有此类carrierId 的运营商并将其分配给局部变量

let carrier = null;

this.route.paramMap.pipe(
      switchMap(
        (params: ParamMap) => this.carriersService.getAll()));

我需要使用 params.get('carrierId') 从 Carrier[] 的 Observable 中找到单个 Carrier，并将其分配给本地运营商变量。

【问题讨论】：

标签： angular rxjs rxjs-observables rxjs-pipeable-operators

【解决方案1】：

combineLatest 将在两个 observables 都发出后发出，这允许您使用路由参数来查找数组中的载体。

combineLatest(
  this.route.paramMap.pipe(map(p => p.get('carrierId'))),
  this.carriersService.getAll()
).pipe(
  map(([carrierId, carriers]) => carriers.find(carrier => carrier.id === carrierId))
).subscribe(carrier => {
  this.carrier = carrier;
});

【讨论】：

谢谢。我发现这种形式的 combineLatest 已被弃用。新版本将一组 observables 作为参数。像这样：combineLatest([this.route.paramMap.pipe(map(p => p.get('carrierId'))), this.carriersService.getAll()]).pipe( map(([carrierId, carriers]) => carriers.find(carrier => carrier.id === carrierId)) ).subscribe(carrier => { this.carrier = carrier; });