如何将 ngFor 处理的列表中的项目与另一个 ngIf 列表匹配答案

【问题标题】：How to match item in the list processed by ngFor with another list with ngIf如何将 ngFor 处理的列表中的项目与另一个 ngIf 列表匹配
【发布时间】：2017-05-29 14:37:49
【问题描述】：

假设有一个类似下面的列表。

items = [
  { id: 1,
    name: "one"
  },
  { id: 3,
    name: "thee"
  },
  { id: 5,
    name: "five"
  },
  { id: 6,
    name: "six"
  },
];

lists = [
  { id: 5,
    name: "five"
  },
  {
    id: 9,
    name: "nine"
  },
];

我希望仅在使用 ngFor 处理项目并且项目 ID 包含在使用 ngIf 的列表中时才显示项目。但是不知道怎么弄

<div *ngFor="let item of items">
  <p *ngIf = "How can I write it here?">
    {{ item.name }}
  <p>
<div>

【问题讨论】：

你能解释一下你想如何使用列表吗？

标签： javascript angular typescript

【解决方案1】：

您可以使用Array#some 检查数组中是否存在项目。

<p *ngIf="lists.some(e => e.id === item.id)">

当在lists 数组中找到与id 值与item 相同的元素时，some 将返回true。

【讨论】：

【解决方案2】：

您可以使用管道直接在*ngFor 中过滤您的items。

在您的模板中：

<div *ngFor="let item of items | yourFilter:lists">
  <p>
    {{ item.name }}
  <p>
<div>

还有你的管道：

@Pipe({name: 'yourFilter'})
export class YourFilterPipe implements PipeTransform {
  transform(items: object[], lists: object[]): object[] {
    return items.filter(item => {
      lists.some(e => e.id === item.id)
    });
  }
}

【讨论】：