从Angular中的服务获取一个唯一数组
从Angular中的服务获取一个唯一数组
我有一个包含成员信息的服务。其中一个变量是团队字符串。\n在我的组件中,我调用服务方法将信息存入一个变量中,然后在组件中展示该信息。\n我想要用服务中团队的唯一列表来填充组件中的变量\"teams\"。这应该考虑到大小写(所以我会使用toUpperCase())。\n我的服务:\n
import { Injectable } from '@angular/core'; @Injectable() export class UserinfoService { //方法或服务 getMembers() { return [ { imageUrl: "../assets/images/filler.jpg", firstName: "filler", lastName: "filler", team: "TEAM A", number: "+123456798", bio: "Lorem ipsum dolor sit amet,...", isActive: true }, { imageUrl: "../assets/images/filler.jpg", firstName: "filler", lastName: "filler", team: "TEam A", number: "+123456798", bio: "Lorem ipsum dolor sit amet,...", isActive: false }, { imageUrl: "../assets/images/filler.jpg", firstName: "filler", lastName: "filler", team: "TEAM B", number: "+123456798", bio: "Lorem ipsum dolor sit amet,...", isActive: true }, ]; } //构造函数 constructor() { } }
\n我的组件:\n
import { Component, OnInit } from '@angular/core'; import { UserinfoService } from '../services/userinfo.service'; @Component({ selector: 'app-teammembers', templateUrl: './teammembers.component.html', styleUrls: ['./teammembers.component.css'] }) export class TeammembersComponent implements OnInit { //属性 teammembers: any[]; teams:any[]; constructor(userinfoService: UserinfoService) { //获取数据 this.teammembers = userinfoService.getMembers(); } ngOnInit() { } }
在Angular中,有一个问题是如何从一个服务中获取一个唯一的数组。下面是一个解决这个问题的方法:
在ES6中,你可以用一行代码来实现这个功能。下面是一个例子:
this.teams = this.teammembers .map(item => item.team) .filter((value, index, self) => self.indexOf(value) === index)
这个方法非常好,完美地解决了问题。你能解释一下它是如何工作的吗?谢谢 🙂
你可以在这里找到相关的文档:learn.microsoft.com/en-us/scripting/javascript/reference/…
听起来很不错!