angular - ngFor 完整列表和唯一列表
问题描述
如果这是一个重复的问题,我深表歉意,我是 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>
实现这一目标的最佳方法是什么?
解决方案
你不需要 lodash,管道也是一个坏主意(参见https://angular.io/guide/pipes#no-filter-pipe)。
只需使用一些现代 Javascript 创建一个独特元素的列表:
this.uniqueTeams = Array.from(new Set(teams.map(team => team.team_name)));
这是类型安全的、无依赖的并且没有性能问题。
推荐阅读
- javascript - 使用代理目标将用户从 localhost:3000 带到 localhost:3000/auth/google 不起作用
- azure-sql-database - 通过 Active Directory 集成连接到 Azure SQL
- java - Java中的深拷贝对象ArrayList
- java - 在更改参数名称时警告开发人员
- excel - vba - 获取周数
- python - 如何装饰python中的所有函数和类方法?
- mysql - 访问我的 phpmyadmin 错误 500 的问题
- robotframework - 如何验证机器人框架中的文本颜色等到页面包含?
- openedge - Progress 4gl - change font color of specific values while exporting temp table to .html file
- python - 列表和数组在存储值时有何不同?