how to get Angular search filter to work?-CodePudding

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 >
    <input
      
      type="text"
      name="Failure_signature"
      [(ngModel)]="Failure_signature"
      (ngModelChange)="Search($event)"
      placeholder="Search for failure signature...."
    />
  </nav>
  <table >
    <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)

CodePudding user response：

To be sure, can you create new property for filtered results? instead to mutate wifi_gerrit_commit_messages in your component.ts
I see that your filter is on this.wifi_gerrit_commit_messages and you apply the *ngFor on wifi_gerrit_commit_messages?.posts (with posts field). Is this really your intention?

CodePudding user response：

Demo You are missing important part also if u make filter with your original value like that and u will lose your data to another filters because you are changing your original data. If u don't want to use second variable then u can use pipe which only customize on html not in data.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search',
})
export class SearchPipe implements PipeTransform {
  transform(value: any[], param: string): any {
    return value.filter(
      (x) =>
        param == null ||
        param == '' ||
        x.commit_id.toLocaleLowerCase().includes(param.toLocaleLowerCase()) ||
        x.gerrit.toLocaleLowerCase().includes(param.toLocaleLowerCase()) ||
        x.Failure_signature.toLocaleLowerCase().includes(
          param.toLocaleLowerCase()
        )
    );
  }
}

and

implement it inside your html like

*ngFor="let cm of wifi_gerrit_commit_messages | search: Failure_signature "