Angular Filter eingehenden Service-Daten

Question

Ich habe einen Dienst, der Informationen über Mitglieder enthält. Eine der Variablen hier ist der boolesche IsActive.

In meiner Komponente rufe ich die Service-Methode auf, um die Informationen in eine Variable zu schreiben, bevor sie in der Komponente angezeigt wird.

Ich möchte nur diejenigen zeigen, die die IsActive auf True gesetzt haben.

Mein Service:

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

meine Komponente:

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

Dank

Answer 1

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

UPDATE

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

Answer 2

Es könnte mehrere Möglichkeiten, dies zu erreichen. könnte man sein Array in Ihrer Komponente mit Filter-Methode für Array filtern und überprüfen, ob isActive-Eigenschaft true ist zweitens könnte die Logik in Ihrem HTML implementieren und verwenden Sie Anweisung wie * ngIf und verbergen Sie die Informationen, die IsActive auf false hat wie diese

*ngIf="!isActive" 

Answer 3

Sie filtern Array.prototype.filter() verwenden, können:

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