首页 文章

angular2过滤器中的ngx-datatable导致退格

提问于
浏览 次
0

我在我的角度项目中使用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;

}

我错过了什么？

angular ngx-datatable

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;

}
    回复于

相关问题