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

Question

我正在尝试使用 NGX-DataTable 的过滤选项 (doc here, demo here) 并尝试重写代码的 ViewChild 部分，因为我将动态地将 table 传递给对话框组件通过变量“配置”，这样我就可以搜索“采购订单”列。

我可以让 table 按采购订单列过滤，但有 2 个问题：

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

到目前为止，这是我在对话框组件中拥有的内容，该组件具有通过变量配置传入的 table 信息：

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() {
  }

}

Answer 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;
 }
}

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

Angular 2 - NGX-DataTable Filter - Replacing View Child

datatable

filtering

viewchild

ngx-datatable

angular