订阅参数并在模板中使用可观察的异步

Question

我想从当前 url 获取配置文件 ID。我正在做类似的事情

opaProfileId$ = this.activatedRoute.queryParamMap.subscribe((params) => +params.get('opaProfileId'));

然后在模板中我想将它与类似的数字进行比较

<tr [ngClass]="{ 'highlight-row': profile.id === opaProfileId$ | async as number }" *ngFor="let profile of data">

但它会引发错误。任何想法如何用 observable 做到这一点？

Answer 1

您不能在组件中合并订阅和模板中的async 管道。

组件控制器中的订阅

您要么在组件控制器中订阅，要么在模板中使用async。在控制器中订阅时，最好在组件关闭时关闭订阅。请参阅here 了解更多信息。

opaProfileId: number;

this.activatedRoute.queryParamMap.subscribe((params) => 
  this.opaProfileId = +params.get('opaProfileId')
);

<tr [ngClass]="{ 'highlight-row': profile.id === opaProfileId }" *ngFor="let profile of data">

async管道

使用async 管道时，您需要使用RxJS map 运算符来获取查询参数和类型转换。使用async 时，无需显式关闭订阅。 async pipe 负责处理。

opaProfileId$: Observable<number>;

this.opaProfileId$ = this.activatedRoute.queryParamMap.pipe(
  map((params) => +params.get('opaProfileId'))
);

<tr [ngClass]="{ 'highlight-row': profile.id === (opaProfileId$ | async) }" *ngFor="let profile of data">