Question

我有一项服务，其中包含有关成员的信息。其中一个变量是isActive boolean。

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

我只想展示那些将isActive设置为true的内容。

我的服务：

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

@Injectable()
export class UserinfoService
{
    //methods or services
    getMembers()
    {
        return [
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                isActive: true
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                isActive: false
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                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[];

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

  ngOnInit() {
  }
}

由于

Answer 1

您可以使用Array.prototype.filter()进行过滤：

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

Answer 2

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[];

    constructor(userinfoService: UserinfoService)
    {
        //getData
        this.teammembers = userinfoService.getMembers()
        .filter(member => member.isActive); // add the filter condititon
    }            

  ngOnInit() {
  }
}

<强>更新

 this.teammembers = userinfoService.getMembers()
            .filter(member => member.isActive && member.lastName.includes("ver")); //  ES6 update

Answer 3

可能有多种方法可以实现这一目标。可以使用数组上的filter方法过滤组件中的数组，并检查isActive属性是否为true 第二种方法可能是在你的html中实现逻辑并使用像* ngIf这样的指令并隐藏isActive为false的信息，如下所示

*ngIf="!isActive"

角度过滤传入的服务数据

3 个答案: