首页 文章

如果数据已更改,则数据网格中的激活过滤器不会刷新

提问于
浏览
1

如果数据发生了变化,我有一个重新过滤的问题 .

请看这个stackblitz:https://stackblitz.com/edit/clarity-light-theme-v11-oosuvk

该柱预先过滤有'AA' . 如果选择一行,将值更改为“BB”,该行将保留在数据网格中,因此过滤器尚未“刷新” .

如何实现datagrid检测更改并重新过滤?列的值正在刷新,为什么不重新过滤?

2 回答

  • 0

    也许你应该尝试强制更新 clrFilterValue . 我设法通过双重绑定 clrFilterValue 来刷新过滤器,并通过临时变量在组件中更新它:

    在.html中:

    <clr-dg-column [clrDgField]="'name' [(clrFilterValue)]="filterValue">Name</clr-dg-column>
    [...]
    <input #input value="{{selectedItem.name}}">
    <button (click)="onSave(input.value)">Save</button>
    

    在.ts中:

    public filterValue = 'AA';
    onSave(value) {
        this.selectedItem.name = value;
        let tmp = this.filterValue;
        this.filterValue = this.filterValue + ' ';
        setTimeout(
          () => {
              this.filterValue = tmp;
          }, 0
        )
      }
    }
    

    但是,使用 setTimeout() 不是我喜欢的...希望这有帮助 .

  • 0

    最快的非hacky方法是在datagrid上调用public dataChanged() 方法来更新显示的项目,因为数据网格不知道的数据发生了变化:https://stackblitz.com/edit/datagrid-edit-refresh?file=app%2Fapp.component.html

    I would highly recommend, however ,在Datagrid中显示它们时使用不可变对象 . 原因在于,对于明显的性能问题,数据网格在每个更改检测周期内都无法对每个项目执行深层对象比较 . 它 will 检查项目是否已从项目的整个列表中添加或删除,但不会检查其属性是否已更改 . 这与 *ngFor 完全相同,并且被认为是几乎所有结构指令的标准 . 在您的情况下,这将意味着编辑逻辑从更改

    selectedItem.name = name
    

    至:

    new Item = {...selectedItem, name};
    items.splice(selectedItemIndex, 1, newItem);
    

    如果您这样做,则无需手动强制执行数据网格更新 .

相关问题