I am working on Advance Search using @tusharghoshbd/ngx-datatable

export const MERCHANT_STATUS_DATA = [
  {
    'key': 0,
    'value': 'Inactive'
  },
  {
    'key': 1,
    'value': 'Active'
  }
]

interface:

export interface Merchant {
  id?: number;
  merchant_name?: string;
  account_number?: string;
  merchant_status?: number;
  created_date?: string;
}

service:

  import { Merchant} from 'src/app/models/merchants.model';

  getAllMerchants(): Observable<Merchant[]> {
    return this.http.get<Merchant[]>(this.baseUrl   'merchants');
  }

component.ts:

import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
import { Merchant } from './merchant';
import { MerchantService } from './merchant.service';
import { MERCHANT_STATUS_DATA } from 'src/app/core/enum/merchantstatus';

export class AppComponent implements OnInit {
  @ViewChild('idTpl', { static: true }) idTpl!: TemplateRef<any>;
  allMerchantList: Merchant[] = [];
  data: Merchant[] = [];
  dataBK: Merchant[] = this.allMerchantList;
  columns: any[] = [];

  constructor(private merchantService: MerchantService) {}

  ngOnInit(): void {
    this.loadDatatable();
    this.loadAllMerchants();
    this.merchantStatusData = MERCHANT_STATUS_DATA;
  }

  loadDatatable() {
    this.columns = [
      {
        key: 'id',
        title: '<div ><i ></i> SN.</div>',
        width: 60,
        sorting: true,
        cellTemplate: this.idTpl,
      },
      {
        key: 'merchant_name',
        title: '<div ><i ></i> Merchant</div>',
        width: 100,
        sorting: true,
      },
      {
        key: 'account_number',
        title:
          '<div ><i ></i> Account No.</div>',
        width: 100,
        sorting: true,
      },
    ];
  }

  loadAllMerchants() {
    this.merchantService.getAllMerchants().subscribe((res: any) => {
      this.allMerchantList = res;
      this.dataBK = this.allMerchantList;
    });
  }

  onMerchantNameSearch(value: any) {
    this.data = this.dataBK.filter(
      (row) => row.merchant_name?.toLowerCase().indexOf(value) ?? -1 > -1
    );
  }

  onAccountNumberSearch(value: any) {
    this.data = this.dataBK.filter(
      (row) => row.account_number?.toLowerCase().indexOf(value) ?? -1 > -1
    );
  }

  onMerchantStatusSearch(value: any)
  {
    this.data = this.dataBk.filter((row) => row.merchant_status == value);
  }
}

component/html

<div >
  <div >
    <label for="merchant_Name">Merchant Name:</label>
    <input
      type="text"
      autocomplete="off"
      
      (input)="onMerchantNameSearch($event.target.value)"
      id="merchant_Name"
      placeholder="Merchant Name"
    />
  </div>
</div>
<div >
  <div >
    <label for="account_number">Account No.</label>
    <input
      type="text"
      autocomplete="off"
      
      (input)="onAccountNumberSearch($event.target.value)"
      id="account_number"
      placeholder="Account Number"
    />
  </div>
</div>
<div >
  <div >
    <label for="merchant_status">Merchant Status</label>
    <ng-select [items]="merchantStatusData"
      [selectOnTab]="true"
      [searchable]="true"
      bindValue="key"
      bindLabel="value"
      placeholder="Select Merchant Status"
      [multiple]="false"
      (change)="onMerchantStatusSearch($event.target.value)"
      [clearable]="true">
    </ng-select>
  </div>
</div>
<ngx-datatable
  tableClass="table table-striped table-bordered table-hover"
  [data]="allMerchantList"
  [columns]="columns"
  [options]="options"
>
  <ngx-caption> Title </ngx-caption>

  <ng-template
    #addressTpl
    let-row
    let-rowIndex="rowIndex"
    let-columnValue="columnValue"
  >
  </ng-template>
  <ng-template #idTpl let-rowIndex="rowIndex" let-row="row">
    {{ rowIndex   1 }}
  </ng-template>
</ngx-datatable>

console.log(this.allMerchantList); and

console.log(this.dataBk);

gives:

[
    {
        "id": 1,
        "merchant_name": "Appiah",
        "account_number": "332222",
        "merchant_status": 1,
        "created_date": "2022-01-24T12:51:08.19",
    },
    {
        "id": 2,
        "merchant_name": "Kwesi",
        "account_number": "554444",
        "merchant_status": 1,
        "created_date": "2022-01-25T16:43:41.873",
    },
    {
        "id": 3,
        "merchant_name": "fggffgfgfg",
        "account_number": "455654",
        "merchant_status": 1,
        "created_date": "2022-01-25T16:46:20.77",
    }
]

I got this error in component.html

Object is possibly 'null'

Property 'value' does not exist on type 'EventTarget'

Error occurs in the template of component MerchantsComponent.

Then I changed (input)="onMerchantNameSearch($event.target.value)" to (input)="onMerchantNameSearch($event.target.value)", the error is no more there but it's not implementing the search action. Ideally as the user types in the text input, it suppose to reflect the result in the datatable, not that's not hppening.

How do I resolve this?

Thanks

The

CodePudding user response：

I recommend using this approach and you need to update the allMerchantList array to update your data table

loadAllMerchants() {
 this.getAllMerchants().subscribe((res: any) => {
   this.allMerchantList = res;
   this.dataBK = res;
 });
}

onMerchantNameSearch(value: string) {
  this.allMerchantList = this.dataBK.filter(
   (row) => row.merchant_name?.toLowerCase().includes(value.toLowerCase()));
}

onAccountNumberSearch(value: any) {
  this.allMerchantList = this.dataBK.filter(
    (row) => row.account_number?.toLowerCase().includes(value)
  );
}

check this StackBlitz link