如何修复Angular自定义管道过滤器出现未定义错误

Question

在我的Angular 10项目中，我有一个表，其中包含一些按类别排列的数据，并且在该类别中有一个搜索框和下拉列表来过滤数据。所以我尝试在这里使用自定义管道过滤器类型来过滤数据。这很好，但有时会出现一些错误，比如

Component.html:57 ERROR TypeError: Cannot read properties of undefined (reading 'toString')

我在那里用stackblitz进行了测试，它工作得很好，但在当地它只是这样，但我找不到解决这个问题的原因。你能帮我解决这个问题吗？谢谢大家！

这是我的Stacklitz代码：

https://stackblitz.com/edit/angular-ivy-qwvmys?file=src%2Fapp%2Fapp.component.ts

我的管道服务.ts

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:

<div class="row mx-0 list-filter mb-4 pl-1">
<div class="input-filter">
<div class="d-inline-block">
<label for="codeInput" class="small-bolded-text" data-inline="true">CODE
<span class="icon-caret-down" aria-hidden="true"></span></label>
<input [(ngModel)]="clientCode" (ngModelChange)="filterServicerData($event)" type="text" data-inline="true" id="codeInput"
class="form-control form-control-sm">
</div>
</div>
<div class="input-filter">
<label for="nameInput" data-inline="true" class="small-bolded-text">NAME
<span class="icon-caret-down" aria-hidden="true"></span></label>
<input type="text" [(ngModel)]="clientName" (ngModelChange)="filterServicerData($event)" data-inline="true" id="nameInput"
class="form-control form-control-sm">
</div>
<div class="input-filter pr-5">
<label for="nameInput" data-inline="true" class="small-bolded-text">ACTIVE
<span class="icon-caret-down" aria-hidden="true"></span>
</label>
<select name="" id="" [(ngModel)]="clientStatus" (ngModelChange)="filterServicerData($event)" class="form-control-sm w-100">
<option value="active">Yes</option>
<option value="inactive">No</option>
</select>
</div>
<li *ngFor="let data of availableFilteredServicer; let i = index">
{{data.clientName}}
{{data.clientId}}
{{data.status}}
</li>

Typescript.ts:

import { Component, VERSION } from '@angular/core';
import { SearchPipe } from './servicer.filter.pipe';
import { Servicer } from './servicer.model';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular ' + VERSION.major;
availableFilteredServicer:Servicer[] = [];
allServicer: Servicer[] = [];
clientName = '';
clientCode = '';
clientStatus = '';

constructor(private searchPipe: SearchPipe) {
this.allServicer = [
{
clientId: 20,
clientName: "Employee",
legacyId: "20",
modelType: "Master",
status: "ACTIVE",
isChecked: true
},
{
clientId: 21,
clientName: "Program",
legacyId: "21",
modelType: "Role",
status: "INACTIVE",
isChecked: true
},
{
clientId: 22,
clientName: "l&t",
legacyId: "22",
modelType: "new",
status: "ACTIVE",
isChecked: true
},
{
clientId: 23,
clientName: "HCL",
legacyId: "23",
modelType: "start",
status: "ACTIVE",
isChecked: true
},
{
clientId: 24,
clientName: "typescript",
legacyId: "24",
modelType: "end",
status: "INACTIVE",
isChecked: true
},
{
clientId: 25,
clientName: "Selected",
legacyId: "25",
modelType: "all",
status: "ACTIVE",
isChecked: true
}
]
}
ngOnInit() {
this.availableFilteredServicer = this.allServicer;
console.log(this.allServicer)
}
filterServicerData(e) {
this.availableFilteredServicer = this.searchPipe.transform(this.allServicer, [this.clientCode, this.clientName, this.clientStatus], ['clientId', 'clientName', 'status']);
console.log(this.allServicer);
}
}

Answer 1

添加了一些if检查。发送$event可能导致了这种情况。

ngOnInit() {
this.filterServicerData()
console.log(this.allServicer)
}
filterServicerData() {
this.availableFilteredServicer = this.searchPipe.transform(this.allServicer, [this.clientCode, this.clientName, this.clientStatus], ['clientId', 'clientName', 'status']);
console.log(this.allServicer);
}

transform(list: any[], value: any[], key: any[]): any {
value.forEach((name:any, index) => {
if (name && name !== undefined) {
list = list.filter((item) => {
return (item[key[index]]
.toString()
.toLowerCase()
.indexOf(name.toString().toLowerCase()) !== -1)
});
}
});
return list;
}

以下是工作示例：https://stackblitz.com/edit/angular-ivy-mrd9tj?file=src%2Fapp%2Fapp.component.ts