Question

我正在订阅可观察对象，它为我提供了以下对象

{
  "Make" : "Make123",
  "Model":
  {
    "Type": "a12",
    "Items": [
      {"id": 1, "Location": "xyz"},
      {"id": 2, "Location": "abc"},
      {"id": 3, "Location": "def"}
    ]
  }
}

我想过滤以获取id = 3的items数组并将其分配给一个名为ActualItem的变量。

我已经尝试过，但是失败了。

item.ts

export interface Items {
  id: number;
  Location: number;
}

model-data.component.ts

import { Items } from '../item.ts';
actualItem: Items;

getItem() {
  this.actualItem = this.ModelData$.subscribe(modelData => {
    return modelData.Model.Items
      .filter(item => item.id == 3);
  })

  console.log(this.actualItem);
}

Answer 1

订阅返回订阅。

要访问已订阅的数据，必须传递一个回调来处理成功事件。只能在回调中访问数据。

我相信this.actualItem是对象而不是数组，因此我将方法filter更改为find，该方法实际上返回了元素并在找到元素后退出搜索。

     this.ModelData$.subscribe(modelData => {
        this.actualItem =  modelData.Model.Items.find(item => item.id == 2);
      })

Answer 2

subscribe返回一个订阅对象，您可以使用该对象取消订阅。它不是订阅成功回调函数返回的对象。

这是您需要将过滤后的项目分配给actualItem变量的代码-

      this.ModelData$.subscribe(modelData => {
        this.actualItem = modelData.Model.Items
        .filter(item => item.id == 2);
      })

Answer 3

即使您不需要订阅可观察对象。使用点击获取商品{}

this.ModelData$.pipe(
      tap(data => {
        this.actualItem = data.Model.Items.find(item => item.id == 2);
      })
    );

过滤嵌套子数组对象的Observable订阅响应

3 个答案: