Angular2 pipe application after receiving data

Question

I have Objectone that is used to manage data received from the back. It is initiated with all fields as display: false, and if I get this particular field from the server, I will eventually change it to true.

filterGroups (initial):

export let filterGroups: any = {
    genericFilters: {
        iboId: {
            'display': false,
            'template': ''
        },
        iboCode: {
            'display': false,
            'template': 'text/iboCode'
        },
        iboName: {
            'display': false,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': false,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'select/multi_iboRank',
        },
        iboEmail: {
            'display': false,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': false,
            'template': 'select/simple_iboNewsletter',
        },
    },
    orderFilters: {
        iboTotalOrders: {
            'display': false,
            'template': 'compound/iboTotalOrders',
        }
    },
    peFilters: {
        iboTotalPE: {
            'display': false,
            'template': 'checkbox/iboTotalPE',
        }
    },
};

In my template, I want to have as many divfilter groups as possible . In this case, we have 3 filters Group: genericFilters, orderFiltersand peFilters.

This one Objectwill change as soon as I get the data from the server (which I call in my own constructor).

So mine filterGroupswill look like as soon as I get data from my asynchronous call .

filterGroups (after an asynchronous call):

export let filterGroups: any = {
    genericFilters: {
        iboId: {
            'display': true,
            'template': ''
        },
        iboCode: {
            'display': true,
            'template': 'text/iboCode'
        },
        iboName: {
            'display': true,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': true,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'select/multi_iboRank',
        },
        iboEmail: {
            'display': true,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': false,
            'template': 'select/simple_iboNewsletter',
        },
    },
    orderFilters: {
        iboTotalOrders: {
            'display': true,
            'template': 'compound/iboTotalOrders',
        }
    },
    peFilters: {
        iboTotalPE: {
            'display': false,
            'template': 'checkbox/iboTotalPE',
        }
    },
};

:

(HTML):

<div *ngFor="let group of filterGroups | keysCheckDisplay">
    <div>
        <h4>{{group.key}}</h4>
    </div>
</div>

, obviusly, @Pipe.

@Pipe:

import { PipeTransform, Pipe } from '@angular/core';
import { isNullOrUndefined } from 'util';

@Pipe({name: 'keysCheckDisplay'})
export class KeysCheckDisplayPipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            if (!isNullOrUndefined(value[key])) {
                let display = false;
                for (let keyChild in value[key]) {
                    if (!isNullOrUndefined(value[key][keyChild]) && value[key][keyChild]['display'] === true) {
                        display = true;
                        break;
                    }
                }
                if (display === true) {
                    keys.push({key: key, value: value[key]});
                }
            }
        }
        return keys;
    }
}

@Pipe, , :

• filterGroups
• , display: true.

:

, @Pipe Object " ", 1 display: true.

:

@Pipe filterGroups , , .

@Pipe , filterGroups.

:

• , ,
• @Pipe inpure, - , .
• : *ngFor="let group of filterGroups | async | keysCheckDisplay". :

: InvalidPipeArgument: " " "AsyncPipe"

?

• @Pipe?

• Object?

• @Pipe, Pipe?

, , , , , .

!

Answer 1

. , "" - . , Angular .

• :
• :

var tmp = this.data; this.data = {}; Object.assign(this.data, tmp);

*ngFor="let item of data | myPipe:counter"

// updated `data`
// this.counter++;