按數組過濾數組，具有真或假值 Angular

Question

A 有一個客戶 class 我在我的 Class 中有一個帶有 sting 列 isSimple 'TAK' 或 'NIE'（英文是或否）的列。 在這個 class 中有一個參數是運河，而這個 class 我有一個參數“Procudent”或“Handel”。 在我的反應式表單中，有一個表單可以過濾 Producent、Handel 和 Simple，我將此信息發送到我的 HomeController。 現在，我想通過此列過濾這些客戶，在這些客戶中，我在 Handel、Producent 或 Simple 附近的輸入中單擊了 true。

我的代碼是：

我在 HomeController 數組中接收到這些數據：

 [
    { name: "Producent", checked: true },
    { name: "Handel", checked: true },
    { name: "Simple", checked: true }
  ];

我的 class 客戶端：

export class Client {
    clientId: number;
    name: string ;
    district: string;
    province: string;
    zip: string;
    city: string;
    full_Address: string;
    latitude: number;
    longitude: number;
    segment: string;
    ph: string;
    bh: number;
    canal: string;
    isSimple: string;
}

我通過這個 class 發送：

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { IBox } from 'src/app/Models/IBox';

@Component({
  selector: 'app-type-of-client',
  templateUrl: './type-of-client.component.html',
  styleUrls: ['./type-of-client.component.css']
})
export class TypeOfClientComponent implements OnInit {
  box_data: IBox[] = [
    { name: "Producent", checked: true },
    { name: "Handel", checked: true },
    { name: "Simple", checked: true }
  ];

  @Output() typeOfClient = new EventEmitter<{}>();


  form_model: FormGroup = this.fb.group({
    search_text: this.fb.control(""),
    boxes: this.fb.array(
      this.box_data.map((box: IBox) => {
         return this.fb.group({ checked: [box.checked],name:[box.name] });
      })
    )
  })

  constructor(private fb: FormBuilder) { }

  get boxes() {
    return this.form_model.get("boxes") as FormArray;
  }

  ngOnInit(): void {
          this.boxes.valueChanges.subscribe(
              (response) =>{

                let clients : IBox[] =[];
                for (let index = 0; index < response.length; index++) {
                  const element = response[index];
                  clients.push(element);
                }

                // let clients : IBox[] = this.box_data;
                this.typeOfClient.emit(clients);
              }
    );
  }
}

現在想嘗試使用方法方法包括但它不起作用。 我像這樣過濾我的客戶提出了另一個論點。

 filterClients() {
    console.log(this.checkedPH);
    console.log(this.checkedSegment);

    const typeClient = this.checkedTypeOfClient


    this.currentClientList = this.baseClientList;
    this.currentClientList = this.currentClientList.filter(client => {
       return this.checkedSegment.includes(client.segment) && this.checkedPH.includes(client.ph);

    });

  }

Answer 1

通常，您有一個父組件接收該值

<!--see that you received the output using "$event"-->
<app-type-of-client (typeOfClient)="filter($event)"></app-type-of-client>

如果您的父組件我必須假設您有一個包含所有客戶端的數組，請使用輔助變量 filterClients

allClients:Clients[];
filterClients:Clients[]=[]

問題是您收到了一個奇怪的 object。 我將在制作過濾器之前轉換此響應

所以，創建一個 function

    filter(response:any[]){
        const filter={
           Producent:response.find(x=>x.name="Producent").checked
           Handel:response.find(x=>x.name="Handel").checked
           Simple:response.find(x=>x.name="Simple").checked
        }

        this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && filter.Producent) &&
                                                     (x.canal=="Handel" && filter.Handel) &&
            ((x.Simple=="TAK" && filter.Simple) || (x.Simple=="NIE" && !filter.Simple)))
    }

並迭代 filterClients。

注意：如果您總是收到三個值並且這些值是按順序排列的。 有些喜歡

this.boxes.valueChanges.subscribe(res=>{
  this.typeOfClient.emit(res.map(x=>x.checked)) //<--this emit, e.g. [true,false,true]
})

你可以過濾喜歡

    filter(response:any[]){
        this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && response[0]) &&
                                                     (x.canal=="Handel" && response[1]) &&
            ((x.Simple=="TAK" && response[2]) || (x.Simple=="NIE" && !response[2])))
    }