时间戳

首页 > 解决方案 > 高效映射 RXJS 可观察对象

typescript - 高效映射 RXJS 可观察对象

问题描述

我有两个不同的对象数组，如何重新分配对象属性数组。

使用键标记：

export interface ProductData
{
    key:string,
    name:string
}


productData:[          
    {key:'index1',name:'invoice'},   
    {key:'index2',name:'Multi'}
];

使用名称来赋值：

export interface filterOptions{
  label:string;
  value:string;
}

以下是我如何处理来自我的服务的结果调用：

this.myService.getProctResponse.subscribe(response=>{    
    this.filterOptions[0].label = response.productData[0].key;
    this.dfilterOptions[0].value = response.productData[0].name;
    this.filterOptions[1].label = response.productData[1].key;
    this.filterOptions[1].value = response.dproductData[1].name;
});

这有效（解决方案 1），但我必须提供每个值的索引才能映射它。

我宁愿做这样的事情：

this.productData.map(items=>{     
    this.filterOptions.value= items.name
    this.filterOptions.label = items.key
});

问题：它将最后一个值作为对象推送，并且不提供对象数组。

这种方法比解决方案 1（上图）效果更好，但是我可以使用更好的方法吗？

 response.productData.forEach((item, index) => {
    let list :FilterModel = {
      label:item.key,
      value:item.name
    };

    this.filterOptions.push(list);
  });

我的问题仍然需要将 key 属性映射到 label 属性，并将 name 属性映射到 value 属性。

预期的o / p：

[{label:'index1',value:'invoice'},
{label:'index2',value:'multi'},
{label:'index3',value:'single'},
{label:'index4',value:'handy'},etc];

标签： typescriptrxjs

解决方案

正如您所指出的，由于多种原因，必须专门绑定到响应中的索引值是笨拙且不可行的。如果响应数组包含两个以上的对象怎么办？如果它包含更少怎么办？

但正如您还注意到的，您确实需要在不同接口的每个属性之间进行映射。因为您正在使用 RXJS 来处理来自远程调用的值，所以我建议您稍微简化一下以在您的可观察进程中运行映射，如下所示：

this.myService.getProctResponse.pipe(
  map(x => {
    let models: Array<FilterModel> = [];
    x.forEach(y => {
      let model: FilterModel = {
        label: y.key,
        value: y.name
      };

      models.push(model);
    });
    return models;
  })
).subscribe(mappedResponse => {
  //Do something with it
});

它只是结合了您已经拥有的一些想法，但将其放入 pipe 方法中，以便仅当 observable 通过它推送任何数据时才计算它。和以前一样，您只需订阅它，而不是接收 ProductData[] 并随后处理它，您将收到 FilterModel[] 来分配您需要的位置，从而简化与组件标记的任何依赖关联。

推荐阅读