如何在Angular中遍历并展示两个关联列表？

嘿，这个需求其实挺常见的！核心思路就是先把列表2的内容按ID分组，这样遍历列表1的时候就能快速定位到匹配的项，不用每次都从头到尾扫一遍列表2，效率会高很多。下面我用两种常用语言给你演示具体实现：

步骤拆解 #

1. 预处理列表2：把列表2转换成「ID为键，对应文本数组为值」的结构，这样查找匹配项的时间复杂度直接降到O(1)。
2. 遍历列表1输出：逐个输出列表1的标题，再从预处理好的结构里取出对应ID的所有文本，跟着输出即可。

Python 实现 #

# 你的示例数据
list1 = [
    {"ID": 1, "Title": "Yellow Green"},
    {"ID": 2, "Title": "Oranges Potatoes"},
    {"ID": 3, "Title": "Shoes And Kittens"}
]

list2 = [
    {"ID": 1, "text": "Blah blah blah"},
    {"ID": 2, "text": "Yakety yak yak"},
    {"ID": 2, "text": "Oh boy this is good"}
]

# 用defaultdict快速分组list2
from collections import defaultdict
grouped_list2 = defaultdict(list)
for item in list2:
    grouped_list2[item["ID"]].append(item["text"])

# 遍历list1并按要求输出
for item in list1:
    print(f"--{item['Title']}")
    # 取出匹配的文本，没有匹配项就输出空数组（啥也不打印）
    for text in grouped_list2.get(item["ID"], []):
        print(text)
    # 加个空行分隔不同组，可读性更好
    print()

运行后输出就是你想要的效果：

--Yellow Green
Blah blah blah

--Oranges Potatoes
Yakety yak yak
Oh boy this is good

--Shoes And Kittens

JavaScript 实现 #

// 示例数据
const list1 = [
    { ID: 1, Title: "Yellow Green" },
    { ID: 2, Title: "Oranges Potatoes" },
    { ID: 3, Title: "Shoes And Kittens" }
];

const list2 = [
    { ID: 1, text: "Blah blah blah" },
    { ID: 2, text: "Yakety yak yak" },
    { ID: 2, text: "Oh boy this is good" }
];

// 用reduce方法分组list2
const groupedList2 = list2.reduce((acc, item) => {
    if (!acc[item.ID]) {
        acc[item.ID] = [];
    }
    acc[item.ID].push(item.text);
    return acc;
}, {});

// 遍历输出
list1.forEach(item => {
    console.log(`--${item.Title}`);
    const matchingTexts = groupedList2[item.ID] || [];
    matchingTexts.forEach(text => console.log(text));
    console.log();
});

小数据量的简化版（不推荐大数据使用） #

如果你的两个列表都很小，也可以直接嵌套遍历，不用预处理，虽然效率低一点，但代码更简单：

for item1 in list1:
    print(f"--{item1['Title']}")
    # 逐个检查list2的项，匹配ID就输出
    for item2 in list2:
        if item2["ID"] == item1["ID"]:
            print(item2["text"])
    print()

这个方法的问题在于，当列表1有n个项，列表2有m个项时，时间复杂度是O(n*m)，数据量大的时候会卡。所以还是推荐先分组的方案～

内容的提问来源于stack exchange，提问作者Mathias