Wyfiltrowanie klientów za pomoca przekazanych inputów z innego komponentu.

Cześć.

Mam Klientów którzy mają swoje segmenty (od A do G).

W HomeComponent dostaję wszystkich tych klientów. Następnie są oni wyświetlani na mapie w MapComponencie.

Jest również AsideComponent gdzie mam Inputy w postaci Segmentów klientów( czyli od A-G, tak jak są klienci).

W tym momencie mam zrobione tak że klikając w Aside Emituję tablicę "Segmentów" klikniętych do HomęControllera (argument checkedSegment) i za jego pomocą chciałbym wyfiltrować wszystkich aktualnych klientów ( currentClientList) czyli na currentClientList(posiada pole o nazwie Segment bo to tablica Klientów) ma zawierać dynamicznie wszystkich klientów którzy zawierają się którykolwiek z segmentów.

Oto mój aktualny kod :

HomeController :

import { Component, OnInit } from '@angular/core';
import { User } from '../Models/User';
import { UserService } from '../Services/UserServices';
import { Client } from '../Models/Client';
import { ClientService } from '../Services/ClientService';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  currentUser$: User;
  currentClientList : Client[];
  currentSegments : string[];
  checkedSegment: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  currentPH : string[];
  checkedPH:string[]= [];

  constructor(private user: UserService,private client: ClientService) {

   }

  ngOnInit(): void {
    this.setCurrentUser();
    this.getCurrentUser();
    this.getClients();

  }


  setCurrentUser(): void{
  const user: User = JSON.parse(localStorage.getItem('user'));
  this.user.setCurrentUser(user);
  }

  getCurrentUser(): void {
    // this.currentUser$ = JSON.parse(localStorage.getItem('user'));
     this.user.currentUser$.subscribe((response) => {
      this.currentUser$ = response;
    });
  }

  getClients(): void {
    this.client.getClients()
    .subscribe((response) => {
        this.currentClientList = response;
        this.currentPH = this.removeDuplicatePH(this.currentClientList);
        this.onMapNotify(this.currentClientList);
    });
  }


  removeDuplicateSegment(cli: Client[]) {
    // tslint:disable-next-line: no-shadowed-variable
    const clients = cli.map(clients => clients.segment).sort();
    return [...new Set(clients)];
  }

  removeDuplicatePH(cli: Client[]) {
    // tslint:disable-next-line: no-shadowed-variable
    const clients = cli.map(clients => clients.ph).sort();
    return [...new Set(clients)];
  }

  onMapNotify(clients: Client[]) : void{
    this.currentClientList = clients;
    this.currentSegments = this.removeDuplicateSegment(clients);
    this.currentPH = this.removeDuplicatePH(clients);
  }

  recieveCheckedSegment(e) {
    console.log(e);
    if (e.isChecked === true) {
      this.checkedSegment.push(e.segment);
    } else {
      let i = this.checkedSegment.indexOf(e.segment);
      if (i != -1) {
        this.checkedSegment.splice(i, 1);
      }
    }
    console.log(this.checkedSegment);
    this.filterClients();
  }

  filterClients() {

      console.log("wyfiltrowane przez " + this.checkedSegment);

      let currSegmentChecked = this.checkedSegment;
      const tempClient = this.currentClientList.map(x => x.segment).filter(function(segment){
        return segment.indexOf(segment) >= 0 ;
      },currSegmentChecked)
      console.log(this.currentClientList.map(x => x.segment));
  }




}

Home.Component.hmtl

<div class="wrapper">
  <app-header></app-header>
  <div class="mainapp">
    <app-map class="map" [clientList]= "currentClientList" *ngIf="currentUser$" (klienci)="onMapNotify($event)"></app-map>
    <app-aside [Segmenty]= "currentSegments" [PH]= "currentPH" class="aside" *ngIf="currentUser$" (checkedPH)= "recieveCheckedPH($event)"
      (checkedSegment)= "recieveCheckedSegment($event)"> {{checkedSegment}}  {{checkedPH}}
    </app-aside>
  </div>


</div>

AsideComponent

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-aside',
  templateUrl: './aside.component.html',
  styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {

 @Input() Segmenty;
 @Output() checkedSegment = new EventEmitter<{}>();
 @Input() PH;
 @Output() checkedPH = new EventEmitter<{}>();


  constructor() {
   }

  ngOnInit(): void {

  }

  emitCheckedValue(event, segment) {
    // console.log(event.srcElement.checked);
    this.checkedSegment.emit({
      isChecked: event.srcElement.checked,
      segment: segment
    });
  }

  emitCheckedPH(event, ph) {
    // console.log(event.srcElement.checked);
    this.checkedPH.emit({
      isChecked: event.srcElement.checked,
      ph : ph
    });
  }


}

aside.component.html

<div class="box">
  <div class="segment">
    <div *ngFor ="let segment of Segmenty; let i = index" >
      <input type="checkbox" checked="true" (change)="emitCheckedValue($event,segment)">
      <span>{{segment}}</span>
    </div>
  </div>
</div>

let filteredList: Client[] = [];

for (let i = 0; i < this.currentClientList.length; i++){
  if (this.currentClientList[i].Segment != null) {
   filteredList.push((this.currentClientList[i]);
 }
}

I tak powinieneś otrzymać listę klientów filteredList z jakimkolwiek segmentem. Czy chodziło o to?

Nie wiem jaki domyślny Segment przypisujesz, jak ktoś nie ma żadnego? Jeśli pusty string, to this.currentClientList[i].Segment != null zamień na this.currentClientList[i].Segment != ''

@bakunet: To nie jest pusta lista. Ta lista jest ściągana po zalogowaniu przez użytkownika. To są przypisani klienci do odpowieniego użytkownika. Ta lista jest zawsze pełna (No chyba że inputy będą wszystkie "odklikane" to ma być pusta. Jest tak loguję się, użytkownik po zalogowaniu dostaję swoją listę klientów ale chce wyfiltrować na mapie tylko tych klientów z segmentu od A-D i taką fukcję chcę stworzyć.