使用 RxJS 过滤单个值并返回一个 observable 并在 Angular 的模板中通过异步使用该 observable

Question

我有一个 Angular 服务，它通过 Angular httpClient 正确返回一个 JSON 对象。 通过 observable，我想通过异步读取输入字段中模板中 JSON 对象的值。

异步部分已经开始工作，只是我在通过 RXJS 从 Json 检索值时遇到问题。

Java 脚本对象：

{
"verbetering": [
{
"entiteit": "S",
"inkoopWaarde": 125000,
"verbeteringBedrag": 3250,
"verbeteringPercentage": 2.6
},
{
"entiteit": "T",
"inkoopWaarde": 125000,
"verbeteringBedrag": 3250,  //In this field is the value I want to show in the template file!!
"verbeteringPercentage": 2.6
}
]
}

模板代码：

<h4>{{ verBeterEuro$ | async }}</h4>

打字稿代码：

verBeterEuro$ = new Observable<number>();

this.verBeterEuro$ = this.improvementService.improvementSubject.pipe(map(y => y.verbetering.filter(y => y.entiteit == 'T'))).pipe((map(w => w  // i am lost...

此代码有效，但这是对 json 中值的直接调用，无法使用：

this.verBeterEuro$ = this.improvementService.improvementSubject.pipe(map(x => {
      return x.verbetering[1].verbeteringBedrag
}));

当 eniteit 为“T”时，我想检索值 verbeteringBedrag。 在这种情况下是应该在模板中显示的值：3250

Answer 1

我以为你几乎第一次就拥有了它：

this.verBeterEuro$ = this.improvementService.improvementSubject.pipe(
  map(
    (y) => {
      const v = y.verbetering.find(vi => vi.entiteit === 'T');
      return v.verbeteringBedrag;
    }
  )
);