javascript - 双重迭代的角度替代方案

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

第一个是所有制造商的主列表，像这样：[{id: "56lkj456", label: "ABC Manufacturer"}]

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

第二个列表是基于用户搜索条件的较小的制造商列表，如下所示：[{id: "56lkj456", facets: 11}]

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

目前，我正在使用 ul li *ngFor="let manufacturer of manufacturerList" ... 遍历 html 文件中的主制造商列表。

在想我可以在 li 上有一个 *ngIf 来调用一个函数，该函数将遍历第二个列表，并且仅在 id 匹配时才显示制造商（即，如果用户搜索产生的制造商与 master 中的制造商匹配列表）。

对我来说似乎有很多计算，都是为了得到名字。想知道是否有人有任何想法来避免这种双重迭代，除了更改后端调用:-)

我的一个想法是从第一个列表中制作一个字典，其中 id 是键，这样在我的 *ngIf 中我可以从该字典中挑选出制造商，而不是遍历。

非常感谢

标签： javascriptangulariteration

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

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

如果 ID 匹配，这将返回制造商对象，如果未找到 ID，则返回 undefined。