javascript - How to properly filter material table using angular using checkbox - Stack Overflow

admin管理员组

文章数量:1358086

I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn't filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.

applyFilter(): void {
console.log('mockData************', this.mockData);
if (!this.mockData || this.mockData.length === 0) {
  console.error('No Data to Filter');
  return;
}

let filteredData = this.mockData; // Start with the full data

if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
  filteredData = this.filterByIdentityCheckbox(filteredData);
}

console.log('Filtered Data ', filteredData);
if (this.dataSource) {
  this.dataSource.data = filteredData;
  this.dataSource.paginator = this.paginator; // Assign paginator here
}
if (this.dataSource && this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
 }
}



filterByIdentityCheckbox(data: any[]): any[] {
console.log(
  '******Applying filter by identifierFilterValue:',
  this.identifierFilterValue
);

if (
  !this.identifierFilterValue ||
  this.identifierFilterValue.length === 0
) {
  console.log('No Identifier Filters are selected return full data');
  return [...data];
}

return data.filter((item) => {
  console.log('Checking item identifier:', item.identifier);

  if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
    console.log('Matched identifier:', item.identifier);
    return true;
  } else {
    console.log('Identifier not matched', item.identifier);
    return false;
  }
});
}
}

I've also tried includes instead of indexOf

filterByIdentityCheckbox(data: any[]): any[] {
console.log('******Applying filter by identifierFilterValue:', 
this.identifierFilterValue);

if (!this.identifierFilterValue || 
this.identifierFilterValue.length === 0) {
  console.log('No Identifier Filters are selected return full data');
  return [...data];
}

return data.filter(item => {
  console.log('Checking item identifier:', item.identifier);

  if (this.identifierFilterValue.includes(item.identifier)) {
    console.log('Matched identifier:', item.identifier);
    return true;
  } else {
    console.log('Identifier not matched', item.identifier);
    return false;
  }
});
 }

I have a parent component, filter component, and view table component.
I read something about using lodash as ngOnChanges doesn't work the second time...let me do some reading.

Here is my stackblitz

I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn't filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.

applyFilter(): void {
console.log('mockData************', this.mockData);
if (!this.mockData || this.mockData.length === 0) {
  console.error('No Data to Filter');
  return;
}

let filteredData = this.mockData; // Start with the full data

if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
  filteredData = this.filterByIdentityCheckbox(filteredData);
}

console.log('Filtered Data ', filteredData);
if (this.dataSource) {
  this.dataSource.data = filteredData;
  this.dataSource.paginator = this.paginator; // Assign paginator here
}
if (this.dataSource && this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
 }
}



filterByIdentityCheckbox(data: any[]): any[] {
console.log(
  '******Applying filter by identifierFilterValue:',
  this.identifierFilterValue
);

if (
  !this.identifierFilterValue ||
  this.identifierFilterValue.length === 0
) {
  console.log('No Identifier Filters are selected return full data');
  return [...data];
}

return data.filter((item) => {
  console.log('Checking item identifier:', item.identifier);

  if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
    console.log('Matched identifier:', item.identifier);
    return true;
  } else {
    console.log('Identifier not matched', item.identifier);
    return false;
  }
});
}
}

I've also tried includes instead of indexOf

filterByIdentityCheckbox(data: any[]): any[] {
console.log('******Applying filter by identifierFilterValue:', 
this.identifierFilterValue);

if (!this.identifierFilterValue || 
this.identifierFilterValue.length === 0) {
  console.log('No Identifier Filters are selected return full data');
  return [...data];
}

return data.filter(item => {
  console.log('Checking item identifier:', item.identifier);

  if (this.identifierFilterValue.includes(item.identifier)) {
    console.log('Matched identifier:', item.identifier);
    return true;
  } else {
    console.log('Identifier not matched', item.identifier);
    return false;
  }
});
 }

I have a parent component, filter component, and view table component.
I read something about using lodash as ngOnChanges doesn't work the second time...let me do some reading.

Here is my stackblitz

• javascript
• angular
• angularjs
• angular-material
• 2-way-object-databinding

Share Improve this question Follow edited Mar 31 at 22:07 spring_hiber asked Mar 31 at 19:27 spring_hiberspring_hiber 17111 gold badge22 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

The problem is that the reference to identifierFilterValue doesn't change (it's the same array, but with new values), so the input of ReportsViewTableComponent is not updated.

Here is the problematic code in the IdentifierFilter component:

onIdentifierSelectionChange(event: MatCheckboxChange, formType: string) {
  if (event.checked) {
    this.selectedFormTypes.push(formType);
  } else {
    this.selectedFormTypes = this.selectedFormTypes.filter(type => type !== formType);
  }

  console.log('Selected Filters to Parent:', this.selectedFormTypes);
  this.identifierFilterChanged.emit(this.selectedFormTypes);
}

You need to write something like this:

this.identifierFilterChanged.emit([...this.selectedFormTypes]);

本文标签： javascriptHow to properly filter material table using angular using checkboxStack Overflow