Angular 2 - NGX-DataTable 过滤器 - 替换视图子项答案

【问题标题】：Angular 2 - NGX-DataTable Filter - Replacing View ChildAngular 2 - NGX-DataTable 过滤器 - 替换视图子项
【发布时间】：2022-05-08 17:23:15
【问题描述】：

我正在尝试使用 NGX-DataTable 的过滤选项（doc here、demo here）并尝试重写代码的 ViewChild 部分，因为我将通过变量“动态地将表格传递给对话框组件” config”，以便我可以搜索“采购订单”列。

我可以让表格按采购订单列进行过滤，但有两个问题：

我无法通过删除输入来撤消过滤。
例如：如果我默认有10个结果，然后输入“a”有4个结果，然后输入“aa”没有结果，即使我完全删除用于过滤的输入我仍然没有结果。
当过滤器更新时，表格应该回到第一页，现在它只是停留在原来的位置。

所以，到目前为止，我在对话框组件中拥有通过变量 config 传入的表信息：

对话框组件中的 HTML：

 <input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the name column...'
    autofocus
    (keyup)='updateFilter($event)'
  />

<ngx-datatable
  class='material'
  #table
  [rows]='config.rows'
  [columns]="config.columns"
  [columnMode]="'standard'"
  [headerHeight]="75"
  [footerHeight]="50"
  [scrollbarH]="true"
  [rowHeight]="'auto'"
  [limit]="5"
  [selectionType]="'multiClick'"
  >
</ngx-datatable>

TS：

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { KeysPipe} from '../keys.pipe';

@Component({
  selector: 'app-dialog-table',
  templateUrl: './dialog-table.component.html',
  styleUrls: ['./dialog-table.component.css']
})
export class DialogTableComponent implements OnInit {

    config: any;
    columns: any;
  table = {
    offset: 0,
  };
  temp = [];

  constructor(public dialogRef: MdDialogRef<DialogTableComponent>) { 
 
  }

  updateFilter(event) {
    const val = event.target.value;
    this.temp = [...this.config.rows];

    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.purchaseOrder.indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.config.rows = temp;

    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

  ngOnInit() {
  }

}

【问题讨论】：

标签： angular datatable filtering viewchild ngx-datatable

【解决方案1】：

我昨天遇到了同样的问题，我通过添加另一个临时数组名称 temp2 来解决它，所以每次按下键时，该行将填充 temp2 数据，该数据基本上是行数据的初始值。像这样：

import { Component, NgModule } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@IonicPage()
@Component({
  selector: 'page-commande',
  templateUrl: 'commande.html',
})
export class CommandePage {
  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
  temp = [];
  temp2 = this.rows; // this the new temp array
  table = {
   offset: 0,
  };

  updateFilter(event) {
   const val = event.target.value.toLowerCase();
   this.rows = [...this.temp2]; // and here you have to initialize it with your data
   this.temp = [...this.rows];
    // filter our data
    const temp = this.rows.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
 }
}

【讨论】：