how to get Angular search filter to work?

I have the following code where I am trying to search the column "Failure signature" by typing a string ,whenever I type a search string it doesn't appear to work ,the data is not filtered based on the search string given and throws the error shown below,I pointed out the line where its throwing the error.

I created a stackblitz link to replicate the error, surprisingly it works with dummy data ,the moment I switch to a backend URL to get data from the database I hit this error

Following is the stackblitz link with complete code

https://stackblitz.com/edit/angular-uxnrrr?file=src/app/failure-signature/failure-signature.component.html

failure-signature.component.html

<html ng-app="failure-signature">
  <h1>Root cause analysis Dashboard</h1>
  <nav class="navbar">
    <input
      class="form-control"
      type="text"
      name="Failure_signature"
      [(ngModel)]="Failure_signature"
      (ngModelChange)="Search($event)"
      placeholder="Search for failure signature...."
    />
  </nav>
  <table class="table table-bordered">
    <thead>
      <tr>
        <!--<th>id</th>-->
        <th>commit</th>
        <th>gerrit</th>
        <th>failure_signature</th>
        <!--<th>commit_message</th>-->
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let cm of wifi_gerrit_commit_messages?.posts">
        <!--<tr *ngFor= "let cm of wifi_gerrit_commit_messages">-->
        <!--<td>{{cm._id}}</td>-->
        <td>{{cm.commit_id}}</td>
        <td>{{cm.gerrit}}</td>
        <td>{{cm.Failure_signature}}</td>
        <!--<td>{{cm.commit_message}}</td>-->
      </tr>
    </tbody>
  </table>
</html>

failure-signature.component.ts

import { Component, OnInit, Injectable, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { enableProdMode } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { wifi_gerrit_commit_messages } from '../_model/wifi_gerrit_commit_messages';
import { FailureSignatureService } from './failure-signature-service';
import { RESOURCE_CACHE_PROVIDER } from '@angular/platform-browser-dynamic';

@Component({
  selector: 'app-failure-signature',
  templateUrl: './failure-signature.component.html',
  styleUrls: ['./failure-signature.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class FailureSignatureComponent {
  wifi_gerrit_commit_messages: wifi_gerrit_commit_messages[] = [];
  Failure_signature: any;
  constructor(public fss: FailureSignatureService) {}
  ngOnInit(): void {
    this.fss.get_wifi_gerrit_commit_messages().subscribe((Response) => {
      this.wifi_gerrit_commit_messages = Response;
      //console.log(Response)
    });
  }

  Search(value: string) {
    if (value == '') {
      this.ngOnInit();
    } else {
      this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter((res) => {
        return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());
      });
    }
  }
}

Error Line:-

  this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter(res => {
    return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());

ERROR:-

   at FailureSignatureComponent.push../src/app/failure-signature/failure-signature.component.ts.FailureSignatureComponent.Search (failure-signature.component.ts:50)
    at Object.eval [as handleEvent] (FailureSignatureComponent.ngfactory.js:62)
    at Object.handleEvent (core.js:27341)
    at Object.handleEvent (core.js:27886)
    at dispatchEvent (core.js:18085)
    at core.js:19288
    at SafeSubscriber.schedulerFn [as _next] (core.js:22113)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)

UPDATED ERROR:-

ERROR TypeError: Cannot read properties of undefined (reading 'toLocaleLowerCase')
    at failure-signature.component.ts:77
    at Array.filter (<anonymous>)
    at SearchPipe.push../src/app/failure-signature/failure-signature.component.ts.SearchPipe.transform (failure-signature.component.ts:71)
    at checkAndUpdatePureExpressionInline (core.js:27032)
    at checkAndUpdateNodeInline (core.js:27601)
    at checkAndUpdateNode (core.js:27559)
    at prodCheckAndUpdateNode (core.js:28100)
    at Object.eval [as updateDirectives] (FailureSignatureComponent.ngfactory.js:89)
    at Object.updateDirectives (core.js:27888)
    at checkAndUpdateView (core.js:27541)