0

我在我的 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;

}

我错过了什么？

4

1 回答 1

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;

}
于 2017-09-29T10:52:28.097 回答