2

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

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

  1. 我无法通过在输入中删除来撤消过滤。
    例如：如果我默认有10个结果，然后输入“a”有4个结果，然后输入“aa”没有结果，即使我完全删除用于过滤的输入我仍然没有结果。

  2. 当过滤器更新时，表格应该回到第一页，现在它只是停留在原来的位置。

任何指针将不胜感激！

因此，到目前为止，我在对话框组件中拥有通过变量 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() {
  }

}
4

1 回答 1

2

昨天我遇到了同样的问题，我通过添加另一个临时数组名称 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;
 }
}
于 2017-05-23T09:53:37.320 回答