Question

我正在处理两个对象数组，并且需要两个列表中的数据才能正确构造“制造商列表”下拉列表，特别是材料垫扩展面板。在前端使用javascript和Angular 7。

第一个是所有制造商的主列表，例如：[{id：“ 56lkj456”，标签：“ ABC Manufacturer”}]

该列表中最多可以包含1200个上述对象。此列表在初始应用加载时生成一次。

第二个列表是基于用户搜索条件的较小的制造商列表，例如：[{id：“ 56lkj456”，facets：11}]

此列表可以包含200个左右的项目。这是我感兴趣的第二个列表，但是我还需要获得制造商的名称（在第一个列表中）。

当前，我正在使用ul li * ngFor =“让制造商清单制造商清单”遍历html文件中的主要制造商清单。

我以为我可以在li上有一个* ngIf，该* ngIf可以调用一个遍历第二个列表的函数，并且仅在ID匹配的情况下才显示制造商（即，如果用户搜索产生的制造商与制造商匹配在主列表中。

对我来说，似乎很多计算工作都是为了获得名称。想知道是否有人有什么想法可以避免这种双重迭代，除了更改后端调用：-）

我的一个主意是从第一个列表中创建一个字典，其中的ID是键，然后在我的* ng中以这种方式从我的字典中挑选出一个制造商，而不是反复进行。

非常感谢

Answer 1

您可以使用数组查找来代替字典。

function findManufacturer(mID) {
    return manufacturerList.find(item => item.id === mID);
}

如果ID匹配，则返回制造商对象；如果找不到ID，则返回未定义。