从 Angular 的服务中获取唯一的数组 [英] Getting a unique array from a service in Angular

问题描述

我有一项包含会员信息的服务.这里的变量之一是团队字符串.

在我的组件中，我调用 service 方法将信息放入一个变量中，然后再将其显示在组件中.

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

我的服务:

import { Injectable } from '@angular/core';@Injectable()导出类 UserinfoService{//方法或服务获取成员(){返回 [{imageUrl: "../assets/images/filler.jpg",firstName: "填充物",lastName: "填充物",团队:团队A"，号码:[phone]"，bio: "Lorem ipsum dolor 坐 amet,...",isActive: 真},{imageUrl: "../assets/images/filler.jpg",firstName: "填充物",lastName: "填充物",团队:团队A"，号码:[phone]"，bio: "Lorem ipsum dolor 坐 amet,...",isActive: 假},{imageUrl: "../assets/images/filler.jpg",firstName: "填充物",lastName: "填充物",团队:TEAM B"，号码:[phone]"，bio: "Lorem ipsum dolor 坐 amet,...",isActive: 真},];}//构造函数构造函数(){}}

我的组件:

import { Component, OnInit } from '@angular/core';从 '../services/userinfo.service' 导入 { UserinfoService };@成分({选择器:'app-teammembers'，templateUrl: './teammembers.component.html',styleUrls: ['./teammembers.component.css']})导出类 TeammembersComponent 实现 OnInit{//道具团队成员:任何[];球队:任何[];构造函数(用户信息服务:用户信息服务){//获取数据this.teammembers = userinfoService.getMembers();}ngOnInit() {}}

解决方案

使用 ES6，您可以在一行中实现.下面是一个例子:

<块引用>

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

I have a service that contains information about members. One of the variables here is the team string.

In my component, I call the service method to put the information in a variable before showing it in the component.

I would like to fill the variable "teams" in my component with an unique list of teams in the service. This should take into account writing (so I would use toUpperCase()).

My service:

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: "[phone]",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: true
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                team: "TEam A",
                number: "[phone]",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: false
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                team: "TEAM B",
                number: "[phone]",
                bio: "Lorem ipsum dolor sit amet,...",
                isActive: true
            },
        ];
    }
    //constructor
    constructor()
    {
    }
}

my component:

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

解决方案

With ES6, you can achieve this in one line. Below is an example:

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

这篇关于从 Angular 的服务中获取唯一的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！