Question

使用Angular，我创建了一个表，其内容由两个Web请求生成。第一个为表提供了文档类型及其相关系统的所有内容。通过循环每个文档类型并获取文档类型系统的URL来触发第二个请求。

我已使用Array.map()修改了数组的结构，并希望将URL作为属性添加到正在迭代的对象中：

[{
  System: "FIS NetImage",
  Title: "Notices"
}, {
  System: "Nautilus",
  Title: "Reports"
}, {
  System: "FIS NetImage",
  Title: "Statements",
}]

如果迭代项目的系统与URL的系统匹配，我有一个if语句来添加URL。但是，我无法解决此问题，因为我收到以下错误：

错误：undefined不是对象（评估＆＃39; modDocTypes [i_1] .SystemLocation = system＆＃39;）

另外，我已经意识到这种方法效率不高，只会在第一个数组中有更多项目时会变得更糟。

如何以有效的方式从其他网络请求添加系统的网址？

I have created a StackBlitz with the web requests' data output.

修改：我已更正将属性添加到使用.map()创建的数组的问题。但是，这仍然是一种效率低下的方法。

Answer 1

这里的原因是你循环遍历两个数组，但它们共享相同的索引 i 。因此，如果系统的长度大于modDocTypes[i]，则modDocTypes可能不存在。

您可以使用Array.find搜索数组中的特定项目。

const system = this.systems.find(item => item.Title === modDocType.System);

假设您希望将Location数组的systems设置为modDocTypes数组，并保持Title值相同。

modDocTypes.map(modDocType => {
  const system = this.systems.find(item => item.Title === modDocType.System);
  if (system) {
    modDocType['SystemLocation'] =  system.Location;
  }
});

查看已修复的 demo 。

将属性添加到使用Array.map创建的对象数组

1 个答案: