ngFor 完整列表和唯一列表答案

【问题标题】：ngFor full list and unique listngFor 完整列表和唯一列表
【发布时间】：2018-08-02 21:28:04
【问题描述】：

抱歉，如果这是一个重复的问题，我是 Angular 的新手，我尝试实施了许多解决方案都无济于事，似乎找不到可以回答我的问题的线程。

我正处于设置 Web 应用程序的初始阶段，所以现在我正在使用 InMemoryDataService（我在 Laravel 中设置了服务，只是还没有绑定它们），如下所示：

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
createDb() {
const passwords = [
{ id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
{ id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
{ id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
{ id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
{ id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
{ id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
{ id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];
return {clients};
}
}

我可以让它正常显示并使用 ngFor 构建一个数据表，但我还希望有一个仅使用独特团队的选择菜单，如下所示：

<select>
<option value="1">Dragons</option>
<option value="2">Eagles</option>
<option value="3">Wolves</option>
</select>

最好的方法是什么？

【问题讨论】：

您可以创建一个仅包含唯一项目数组的属性（这是最简单的解决方案），也可以创建一个 filter pipe 为您的记录分组（更可重用） .
这是very simple group by example。您可以遵循类似的模式。从服务返回数据后，将其分组，然后将其存储在名为 groupedData 的字段中。
考虑使用管道：stackoverflow.com/questions/35534959/…

标签： angular ngfor

【解决方案1】：

您可以使用新版本中 deafult 提供的任何角度的 lodash 库

有消除重复的 uniqBy 属性。

例如

let clients = [
    { id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
    { id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
    { id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
    { id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
    { id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
    { id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
    { id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];

clients = _.uniqBy(clients, 'team_name');
console.log(clients);

【讨论】：

使用 lambda 将是 tpge 安全的，与您当前的答案不同：team => team.team_name。 Lodash 确实支持这一点。
感谢所有回复，这个对我来说效果最好，我真的很感激！

【解决方案2】：

你不需要 lodash，管道也是一个坏主意（参见https://angular.io/guide/pipes#no-filter-pipe）。

使用一些现代 Javascript 简单地创建一个独特元素的列表：

this.uniqueTeams = Array.from(new Set(teams.map(team => team.team_name)));

这是类型安全的、无依赖的并且没有性能问题。

【讨论】：

【解决方案3】：

你可以这样做：

const clients = [
    { id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
    { id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
    { id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
    { id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
    { id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
    { id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
    { id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];

const uniqueTeams = [];

clients.forEach(client => {
   if(unqiueTeams.indexOf(client.team_name) === -1) {
       uniqueTeams.push(client.team_name);
   }
});

console.log(uniqueTeams);

【讨论】：