循环（显示）两个相关的角度列表？答案

【问题标题】：Loop Through (Display) Two Related Angular Lists?循环（显示）两个相关的角度列表？
【发布时间】：2018-03-17 20:28:19
【问题描述】：

两个单独的列表（数组）
第二个列表包含对第一个具有匹配 ID 的引用

关于如何操作的任何提示
循环遍历列表 1
如果有，则显示列表 2 中的匹配项

例如

列表 1
编号：1 标题：黄绿
ID：2 标题：橘子土豆
ID：3 标题：鞋子和小猫
...

列表 2
ID：1 文本：Blah blah blah
ID：2 文字：Yakety yak yak
ID：2 文字：哦，男孩，这很好
...

显示类似的内容
--黄绿
哈哈哈哈哈哈

--橘子土豆
牦牛牦牛牦牛
哦，男孩，这很好

--鞋子和小猫
（这里什么都不显示）

【问题讨论】：

我知道如何为一个列表执行 *ngFor。我只是不知道如何从每个项目下的第二个列表中获取匹配项目。
stackoverflow.com/a/44273239/9034168
谢谢 Efe。不幸的是，该示例将所有数据整齐地放在一个列表中。我有两个单独的列表。

标签： angular

【解决方案1】：

您必须为此应用程序使用双 *ngFor（和 1 个 *ngIf），如下所示：

<div *ngFor="let item1 of arr1">
  -- {{item1.Title}}
  <div *ngFor="let item2 of arr2">
    <div *ngIf="(item2.ID === item1.ID)">{{item2.text}}</div>
  </div>
  <br/>
</div>

这是您的应用程序的 plunker：

https://plnkr.co/edit/m8LXiwoBRo7MVULkBHKK?p=preview

【讨论】：