Javascript 使用其他组件提供的输入筛选出客户

我的客户有自己的细分市场（从A到G）

在HomeComponent，我得到了所有这些客户。然后，它们将显示在MapComponent中的地图上

还有一个分解组件，我以客户细分的形式进行输入（即来自A-G，因为有客户）

在这一点上，我已经这样做了，通过单击旁边，我将发出一个“段”表，单击到HomaController（参数checkedSegment），并用它过滤所有当前客户机（currentClientList），即currentClientList（它有一个名为Segment的字段，因为它是一个客户数组）它应该动态地包含属于任何细分市场的所有客户

家庭控制器：

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>

{{checkedSegment}{{checkedPH}}

反组分

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
    });
  }

}

从'@angular/core'导入{Component，EventEmitter，Input，OnInit，Output}；
@组成部分({
选择器：'app aside'，
templateUrl:'./aside.component.html'，
样式URL:['./aside.component.css']
})
导出类AsideComponent实现OnInit{
@分段输入法；
@Output（）checkedSegment=新的EventEmitter（）；
@输入（）PH；
@Output（）checkedPH=neweventemitter（）；
构造函数（）{
}
ngOnInit（）：void{
}
emitCheckedValue（事件、段）{
//log（event.srcmelement.checked）；
this.checkedSegment.emit({
isChecked:event.srcmelement.checked，
段：段
});
}
排放检查ph（事件，ph）{
//log（event.srcmelement.checked）；
这是checkedPH({
isChecked:event.srcmelement.checked，
ph:ph
});
}
}

.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>

{{segment}}