代码之家 › 专栏 › 技术社区 › angler

ngFor完整列表和唯一列表

ngfor angular

angler · 技术社区 · 6 年前

抱歉,如果这是一个重复的问题,我对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>

实现这一目标的最佳方法是什么?

3 回复 | 直到 6 年前

Lynx 242 6 年前

你可以这样做:

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);

Aniket Avhad 6 年前

您可以使用lodash库,无论deafolt在较新版本中提供了哪个角度

有一个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);

Ingo Bürk 6 年前

你不需要用矿粉来做这个,而管道也是一个坏主意(参见 https://angular.io/guide/pipes#no-filter-pipe ).

只需使用一些现代Javascript创建一个独特元素的列表:

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

这是类型安全的,无依赖关系,没有性能问题。