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>
JavaScript 
TypeScript 
Angular 