ngFor 完整列表和唯一列表 [英] ngFor full list and unique list

问题描述

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

Apologies if this is a duplicate question, I'm new to Angular and I've tried to implement a number of solutions to no avail and can't seem to find a thread that answers my problem.

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

I'm in the initial stages of setting up a web app so for now I'm using an InMemoryDataService (I do have services set up in Laravel, just don't have them tied in yet) that looks like this:

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 构建数据表，但我也想有一个仅使用独特团队的选择菜单，如下所示:

I can get it to display fine and build out a data table using ngFor but I want to also have a select menu using only the unique teams so like this:

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

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

What is the best way to accomplish this?

推荐答案

你可以这样做:

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

这篇关于ngFor 完整列表和唯一列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！