如何修复带有未定义误差的角型自定义管过滤器？

Question

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

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

我用stackblitz进行了测试，它运行得很好，但在本地，它只是这样做，但我找不到修复这个问题的原因。你们能帮我解决这个问题吗，谢谢！

这是我的Stackblitz代码：

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

我的pipe.service.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