angular2 中的 ngx-datatable 在退格键上过滤返回结果

Question

我在 angular 项目中使用 ngx-datatable (http://swimlane.github.io/ngx-datatable/#filter) 并尝试添加过滤器。过滤器已成功添加到指定的列上，但是当我用退格键删除过滤器字符时，我的原始列表数据没有填充回来。

我的HTML:

<input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the task name column...'
    (keyup)='updateFilter($event)'
  />
<div>
    <ngx-datatable  class="material"
    [rows]="tasks"
    [columns]="columns">
</ngx-datatable>

在我的组件中我有：

rows = [];
columns = [
{ name: 'Id' },
{ name: 'What task', prop: 'what_task' },
{ name: 'Budget', prop:'tentative_budget' }
];

temp = [];
ngOnInit() {

    this.taskListService.getTasks().subscribe(
        tasks => {
            console.log(tasks);
            this.tasks=tasks;
            this.tableData=this.tasks;
            this.tableModel.addAll(this.tableData);

        }
        )
}

updateFilter(event) {
    const val = event.target.value.toLowerCase();

    // filter our data
    const temp = this.tasks.filter(function(d) {
        console.log(d.what_task.toLowerCase().indexOf(val) !== -1 || !val)
        return d.what_task.toLowerCase().indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.tasks = temp;

}

我错过了什么？

Answer 1

你犯了一个简单的逻辑错误。尝试这样的事情

HTML

<ngx-datatable  class="material"
[rows]="tableData"
[columns]="columns">

TS

updateFilter(event) {
const val = event.target.value.toLowerCase();

// filter our data
const temp = this.tasks.filter(function(d) {
    console.log(d.what_task.toLowerCase().indexOf(val) !== -1 || !val)
    return d.what_task.toLowerCase().indexOf(val) !== -1 || !val;
});

// update the rows
this.tableData= temp;

}

angular2 中的 ngx-datatable 在退格键上过滤返回结果

ngx-datatable in angular2 filter back results on backspace

ngx-datatable

angular