add function to refresh applied filters on a button, function doesn't work-CodePudding

html button```


\<button
id="styleButton"

(click)="removeAllFilters(appliedFilters)"
\\>
\<i \>\</i\>
\</button\>

```//ts function

removeAllFilters() {
        this.appliedFilters = [];

        this.searchStaffText = '';

        this.status.map(item => {
            if (item.name !== StaffTypeStatus.ACTIVE) item.selected = false;
        });

        this.locations.map(item => (item.selected = false));

        this.roles.map(item => (item.selected = false));
    }

I tried to apply remove all filters function, but doesn't seem to work at all.

CodePudding user response：

Map method never edits the actual array. It just returns a new array that contains your modifications.

Therefore you have two alternatives to solve the problem;

1. You can change map to forEach

removeAllFilters() {
        this.appliedFilters = [];
        this.searchStaffText = '';
        this.status.forEach(item => {
            if (item.name !== StaffTypeStatus.ACTIVE) item.selected = false;
        });
        this.locations.forEach(item => (item.selected = false));
        this.roles.forEach(item => (item.selected = false));
    }

2. You can reassign all the arrays to the modified ones that will be returned by map method.

removeAllFilters() {
        this.appliedFilters = [];
        this.searchStaffText = '';
        this.status = this.status.map(item => {
            if (item.name !== StaffTypeStatus.ACTIVE) item.selected = false;
            return item;
        });
        this.locations = this.locations.map(item => {
            item.selected = false;
            return item;
        });
        this.roles = this.roles.map(item => {
            item.selected = false;
            return item;
        });
    }

CodePudding user response：

First of all inside your html you call removeAllFilters(appliedFilters). The param appliedFilters is not available inside your ts code.

Second: You use map wrong. Every map needs to return something. Example:

removeAllFilters() {
        this.appliedFilters = [];

        this.searchStaffText = '';

        this.status = this.status.map(item => {
            if (item.name !== StaffTypeStatus.ACTIVE) item.selected = false;
            return item; // IMPORTANT TO RETURN ANYTHING
        });

        this.location = this.locations.map(item => {
            item.selected = false;
            return item; // IMPORTANT TO RETURN ANYTHING
        });

        this.roles = this.roles.map(item => {
            item.selected = false;
            return item;
        });
    }

Greetings, Flo