使用 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;
    }
  )
);