使用不同类型的 object Angular 从数组中过滤数据

Question

I get input data in this form:

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

Only the checked values from true to false and vice versa can change. This is assigned to the checkedTypeOfClient variable. Later, I'd like to filter out all my clients (the currentClientList array) based on the checkedTypeOfClient variable.

Here are the properties of the Client class:

export class Client {
    clientId: number;
    name: string ;
    district: string;
    province: string;
    zip: string;
    city: string;
    // tslint:disable-next-line: variable-name
    full_Address: string;
    latitude: number;
    longitude: number;
    segment: string;
    ph: string;
    bh: number;
    canal: string;
    isSimple: string;
}

The complication of this task is that the filtration goes like this. The values Producent and Handel are values that can be placed in the canal column that are in the Client Class, and the Simple value is a value that is also in the Client class in the isSimple column and can take the value "YES" or "NO"

for now, what I was able to do is extract what values Producent, Handel, Simple are marked and grind the Simple field to "TAK" or NIE "

filterClients() {
    console.log(this.checkedTypeOfClient);

    const filter={
      Producent:this.checkedTypeOfClient.find(x=>x.name=="Producent").checked,
      Handel:this.checkedTypeOfClient.find(x=>x.name=="Handel").checked,
      Simple:this.checkedTypeOfClient.find(x=>x.name=="Simple").checked
   }

     let simpleFilter = this.returnFilterSimpleValue(filter.Simple);

    this.currentClientList = this.baseClientList;

  }

  returnFilterSimpleValue(value : boolean) : string {

    switch (value) {
      case true:
          return "TAK";
      case false:
          return "NIE";
    }


If(Producent = True){
this.currentClientList(client.producent)
}
If(Handel= True){
this.currentClientList(client.handel)
}
If(Handel= True || Producent = True){
this.currentClientList(client.handel) && this.currentClientList(client.producent)
}

The question is how to filter it?

Answer 1

I'm not sure that I'm fully understanding your question. However, here's how I'd solve it.

First of all, I'd like to introduce you to union types (a feature of typescript that allows you to combine multiple types, but can also be used for literal values .

In your case that would be useful for:

• isSimple: "YES" | "NO" isSimple: "YES" | "NO" meaning that it can only have either values. Also, why not make it a boolean?
• canal: "Handel" | "Producent" canal: "Handel" | "Producent" meaning that it can only have either the "Handel" or "Producent" string value.

Secondly you can simple use filter array method to filter the objects that have a certain property values, which can also be chained.

Is this what you wanted to do or did I miss something?

Answer 2

I need value:

If(Producent = True){
this.currentClientList(client.producent)
}
If(Handel= True){
this.currentClientList(client.handel)
}
If(Handel= True || Producent = True){
this.currentClientList(client.handel) && this.currentClientList(client.producent)
}

Answer 3

I'm not sure either if I get the question right. As i understand it, you have two different types of clients: CanalClient and SimpleClient . with the superclass Client sharing the common attributes.

export class CanalClient extends Client {
canal: string;
}

export class Simpleclientextends Client {
isSimple: string; // as Ruben asked - why is this not a simple boolean?
}

In the filter Operation, you can then check the class with instanceof CanalClient etc. to have type safety. Actually, in an if block- this is type guarded:

if(client instanceof CanalClient) {
console.log( client.canal) // Typescript will know this is of type Canalclient!
}

Answer 4

I tried to keep it as simple as I could by reusing your code as per my understanding. Try this:

filterClients() {
    console.log(this.checkedTypeOfClient);

    const filter={
        Producent:this.checkedTypeOfClient.find(x=>x.name=="Producent").checked,
        Handel:this.checkedTypeOfClient.find(x=>x.name=="Handel").checked,
        Simple:this.checkedTypeOfClient.find(x=>x.name=="Simple").checked
    }

   let simpleFilter = this.returnFilterSimpleValue(filter.Simple);

   this.currentClientList = this.baseClientList.filter(c => {
       if (c.canal=='Producent' && filter.Producent) {
         return true;
       }
       if (c.canal=='Handel' && filter.Handel) {
         return true;
       }
    });
    this.currentClientList.foEach(c => { c.isSimple = this.returnFilterSimpleValue(c.isSimple) });
}