Angular

Question

进行高级搜索

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

接口：

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

服务：

  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 class="blue"><i class="fa fa-id-card-o"></i> SN.</div>',
        width: 60,
        sorting: true,
        cellTemplate: this.idTpl,
      },
      {
        key: 'merchant_name',
        title: '<div class="blue"><i class="fa fa-user"></i> Merchant</div>',
        width: 100,
        sorting: true,
      },
      {
        key: 'account_number',
        title:
          '<div class="blue"><i class="fa fa-envelope"></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 class="col-sm-4 col-xs-6 col-6">
  <div class="form-group">
    <label for="merchant_Name">Merchant Name:</label>
    <input
      type="text"
      autocomplete="off"
      class="form-control"
      (input)="onMerchantNameSearch($event.target.value)"
      id="merchant_Name"
      placeholder="Merchant Name"
    />
  </div>
</div>
<div class="col-sm-4 col-xs-6 col-6">
  <div class="form-group">
    <label for="account_number">Account No.</label>
    <input
      type="text"
      autocomplete="off"
      class="form-control"
      (input)="onAccountNumberSearch($event.target.value)"
      id="account_number"
      placeholder="Account Number"
    />
  </div>
</div>
<div class="col-sm-4 col-xs-6 col-6 ">
  <div class="form-group">
    <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);和

console.log(this.dataBk);

给出：

[
    {
        "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",
    }
]

我在 component.html

中遇到了这个错误

Object is possibly 'null'

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

Error occurs in the template of component MerchantsComponent.

然后我将 (input)="onMerchantNameSearch($event.target.value)" 更改为 (input)="onMerchantNameSearch($event.target.value)"，错误不再存在，但它没有执行搜索动作。理想情况下，当用户在文本输入中键入内容时，它应该会在数据表中反映结果，而不是 hppening。

我该如何解决这个问题？

谢谢

Answer 1

我推荐使用这种方法，你需要更新 allMerchantList 数组来更新你的数据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)
  );
}

检查这个StackBlitz link

Angular - 属性 'value' 在数据表搜索中的类型 'EventTarget' 上不存在

Angular - Property 'value' does not exist on type 'EventTarget' in datatable search

datatable