过滤 observable 对嵌套子数组对象的订阅响应答案

【问题标题】：Filter observable's subscription response for nested child array object过滤 observable 对嵌套子数组对象的订阅响应
【发布时间】：2020-01-16 16:18:47
【问题描述】：

我订阅了 observable，它给了我下面的对象

{
  "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;
}

模型数据.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);
}

【问题讨论】：

标签： angular typescript ecmascript-6 rxjs

【解决方案1】：

订阅返回订阅。

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

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

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

【讨论】：

哇就像一个魅力。谢谢，我只是在尝试过滤方法。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

即使您不需要订阅 observable。使用点击获取项目{}

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

【讨论】：