Question

我尝试使用NGX-DataTable的过滤选项（doc here，demo here）并尝试重写代码的ViewChild部分，因为我将动态传递通过变量＆＃34; config＆＃34;将表转换为对话框组件所以我可以搜索＆＃34;采购订单＆＃34;列。

我可以通过“采购订单”列获取表格，但有2个问题：

我无法通过在输入中删除来撤消过滤。
例如：如果我默认有10个结果，然后输入＆＃34; a＆＃34;并有4个结果，然后键入＆＃34; aa＆＃34;并且没有结果，即使我完全删除了用于过滤的输入，我仍然没有结果。
当过滤器更新后，表格应该返回到第一页，现在它就停留在原来的位置。

任何指针都将不胜感激！

所以这是我到目前为止在对话框组件中通过变量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() {
  }

}

Answer 1

昨天我遇到了同样的问题，我通过添加另一个temp数组名称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过滤器 - 替换View Child

1 个答案: