ngFor 使用唯一键的迭代答案

【问题标题】：ngFor iteration using a unique keyngFor 使用唯一键的迭代
【发布时间】：2019-01-03 22:18:44
【问题描述】：

HTML

   <li*ngFor="let data of employeeData"> {{data.name}} </li>;

JSON 数据

   [{employeeID: "123",
    name : "abc",
    gender: "F"},

  {employeeID: "345",
   name : "def",
   gender: "F"}
   ]

我只想显示员工 ID 为 345 的员工姓名。我怎样才能做到这一点？我需要使用管道吗？

【问题讨论】：

你可以做ngIf="data.employeeID == 345
不要在模板中做业务逻辑。组件应该找到需要显示的项目并且模板显示它。不要使用*ngFor 来显示数组中的一个项。
基本上，我有一个包含员工姓名的下拉列表，当我选择员工时，我需要显示该员工特定的数据。员工姓名下拉列表包含员工 ID 值。

标签： javascript html angular typescript angular5

【解决方案1】：

如果您需要显示选定的用户数据，实际上不需要 ngFor，您可以执行以下操作：

users = [
    {employeeID: "123",
    name : "abc",
    gender: "F"},
    {employeeID: "345",
    name : "def",
    gender: "F"}
]

selectedUser = users.find((user) => user.employeeID == "345");

<li> {{selectedUser.name}} </li>;

【讨论】：

【解决方案2】：

一种选择是构建一个过滤函数来过滤到您想要的员工。那么你真的不需要*ngFor。

我在这里有一篇关于过滤的博文：https://blogs.msmvps.com/deborahk/filtering-in-angular/

【讨论】：