添加函数以刷新按钮上应用的过滤器，函数不起作用

Question

html button

<button
id="styleButton"
class="ml-2 refreshButton"
(click)="removeAllFilters(appliedFilters)"
>
<i class="fas fa-sync-alt"></i>
</button>

ts函数

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

我试图应用删除所有过滤器功能，但似乎根本不起作用。

Answer 1

Map方法从不编辑实际的数组。它只是返回一个包含修改的新数组。

因此你有两个选择来解决这个问题;

1。您可以将map更改为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。您可以将所有数组重新赋值给map方法返回的修改后的数组。

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

Answer 2

首先在html中调用removeAllFilters(appliedFilters)。参数appliedFilters在ts代码中不可用。

第二:你使用map错误。每个地图都需要return。例子:

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

问候,弗洛