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

标签 javascript angular

<分区>

我有一个包含成员(member)信息的服务。这里的变量之一是团队字符串。

在我的组件中,我调用服务方法将信息放入变量中,然后再在组件中显示。

我想用服务中唯一的团队列表填充组件中的变量“teams”。这应该考虑到写作(所以我会使用 toUpperCase())。

我的服务:

import { Injectable } from '@angular/core';

@Injectable()
export class UserinfoService
{
    //methods or services
    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
    constructor()
    {
    }
}

我的组件:

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
{
    //props
    teammembers: any[];
    teams:any[];

    constructor(userinfoService: UserinfoService)
    {
        //getData
        this.teammembers = userinfoService.getMembers();
    }            

  ngOnInit() {
  }
}

最佳答案

使用 ES6,您可以在一行中实现这一目标。下面是一个例子:

this.teams = this.teammembers
                 .map(item => item.team)
                 .filter((value, index, self) => self.indexOf(value) === index)

关于javascript - 从 Angular 中的服务获取唯一数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45373304/

相关文章:

javascript - 向上/向下滑动不适用于 Ionic 2

javascript - 使用 2D 渲染上下文的 HTML5 Canvas 转换问题

javascript - 使用 Express Node 将 API 数据渲染到 html/handlebars

Javascript 函数调用另一个函数作为参数

javascript - 使用行为主体跨侧组件通信更新计数项

node.js - 命名一个 javascript 库,作为可选

Angular : HttpClient Service and Observable custom type

Angular 默认选项选择的属性未按预期工作

node.js - Shibboleth 与 Node.js Rest API 和 Angular 2 应用程序

dependency-injection - 在调用 bootstrap() 之前如何访问 angular2 的 Http 服务?