角度 2 - NGX 数据表过滤器 - 替换视图子级

Question

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

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

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

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

因此，到目前为止，这是我在对话框组件中所拥有的内容，该组件通过变量配置传递了表信息：

对话框组件中的 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;
}
}