Within my Angular 10 project, I've implemented a table that organizes data by category and includes search boxes and dropdowns for filtering. To filter the data, I utilized a custom pipe filter type. While it generally functions correctly, there are instances where an error is encountered:
Component.html:57 ERROR TypeError: Cannot read properties of undefined (reading 'toString')Although testing on Stackblitz shows no issues, this error persists locally. Despite troubleshooting, I haven't been able to pinpoint the exact cause. Any assistance in resolving this matter would be greatly appreciated. Thank you!
You can view my code on Stackblitz here:
https://stackblitz.com/edit/angular-ivy-qwvmys?file=src%2Fapp%2Fapp.component.ts
Below is my pipe.service.ts code:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "search"
})
export class SearchPipe implements PipeTransform {
transform(list: any[], value: any[], key: any[]): any {
value.forEach((name:any, index) => {
if (name) {
list = list.filter((item) => {
return (item[key[index]]
.toString()
.toLowerCase()
.indexOf(name.toString().toLowerCase()) !== -1)
});
}
});
return list;
}
}
HTML code snippet:
<div class="row mx-0 list-filter mb-4 pl-1">
// HTML code
</code></pre>
<p>TypeScript file excerpt:</p>
<pre><code>import { Component, VERSION } from '@angular/core';
import { SearchPipe } from './servicer.filter.pipe';
// TypeScript code snippet...