从Angular中的服务获取一个唯一数组

22 浏览
0 Comments

从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() {
  }
}

0
0 Comments

在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/…

听起来很不错!

0