Angular выполняет поиск по сгруппированным данным, используя ngx-pipe и панель расширения углового материала.

Question

Я пытаюсь выполнить операцию фильтра поиска для данных, сгруппированных с помощью ngx-pipe. Я попытался следующий код, но получаю «ERROR TypeError: Невозможно прочитать свойство« toLowerCase »неопределенного» этой ошибки. Пожалуйста, найдите изображение, которое показывает структуру данных. Каждый массив делится на два индекса. Массив [0] содержит параметр purchase_id, по которому сгруппированы данные, а массив 1 содержит список записей с одинаковым идентификатором purchase_id. Теперь я хочу найти записи по vendor_name в массиве 1 и показать результат Заранее спасибо

HTML

      <form class="form">
        <mat-form-field class="width">
          <input matInput placeholder="Search by seller name" aria-label="vendor" [matAutocomplete]="auto" [formControl]="searchVendorCtrl"  matTooltip="Type to filter the seller list"
              matTooltipPosition="after">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let vendor of filteredoptions | async  " [value]="vendor.name">
              <span>{{ vendor.name }} </span>
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>



<mat-accordion *ngFor = "let prod of final_array | groupBy: 'purchase_id' | pairs  ; let i = index">
        <mat-expansion-panel   >

        </mat-expansion-panel>
        <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
          <mat-expansion-panel-header >
            <mat-panel-title >

                {{prod[0]}}

            </mat-panel-title>
            <mat-panel-description  >
                Open me
            </mat-panel-description>
          </mat-expansion-panel-header >

          <div class="row">
                <div class="col-2"><b>Serial number</b></div>
                <div class="col-2"> <b>Product name</b> </div>
                <div class="col-2"> <b>Quantity</b> </div>
                <div class="col-2"> <b>Vendor name</b> </div>
                <div class="col-2"> <b>Date</b> </div>



            </div>
<mat-divider></mat-divider>
          <div class="row"  *ngFor = "let val of prod[1]" > 

                <div class="col-2" >{{val.serial_no}}</div>
                <div class="col-2">{{val.product_name}}</div>
                <div class="col-2">{{val.quantity}}</div>
                <div class="col-2">{{val.vendor_name}}</div>
                <div class="col-2">{{val.date}}</div>

                <button class="btn btn-secondary" (click) = "update(val,val.serial_no)" >Edit</button>


            </div>         

        </mat-expansion-panel>
      </mat-accordion>

pipe

export class purchaseFilerPipe implements PipeTransform {

    vendorNames : vendorNames[] = [];
    check : boolean = false;
    name: any;

    transform(purchase_list  : any[], searchTerm : string ): any[] {
        if(!purchase_list || !searchTerm) {
            return purchase_list;
        }[![enter image description here][1]][1]

        for(let i =0; i<purchase_list.length; i++) {

            this.name = purchase_list[i][1][0].vendor_name
            console.log(this.name)
            this.add(purchase_list[i][1][0].vendor_name,purchase_list[i][0])

        }

        console.log(purchase_list)

        for(let i=0; i<purchase_list.length;i++) {

            return purchase_list.filter(purchase_list => 
                purchase_list[i][1][0].vendor_name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);

        }

        }


        add(name,purchase_id) {

            let vendor =  new vendorNames(name,purchase_id)
           if( this.vendorNames.some((vendor) => vendor.name === name && vendor.purchase_id === purchase_id)) {
                this.check = false
        }
            else {
            this.check = true
        }
           if(this.check){
               this.vendorNames.push(vendor)
           }