Angular 5中Kendo Grid删除输入框最后字符时事件不触发如何解决

这个问题我之前也碰到过，核心原因是当过滤值从非空变为空时，Kendo Grid默认认为过滤状态没有发生有效变化（毕竟你初始的state.filters里所有value都是空字符串），所以不会主动触发dataStateChange事件。另外你的代码里还有几处语法和逻辑小问题，咱们一步步来修复：

第一步：修复现有代码的语法错误 #

先把dataStateChange方法里的错误修正，确保状态更新后能正确触发数据加载：

public dataStateChange(state: DataStateChangeEvent): void {
  this.state = state;
  this.loadProducts(); // 之前的代码语法错误，这里要调用loadProducts刷新数据
}

另外，注意你的组件里定义了gridView，但HTML里绑定的是gridData，统一一下：

• HTML里修改为：[data]="gridView"
• loadProducts方法里赋值给gridView：

private loadProducts(prods?: any[]): void {
  const products = prods || this.products;
  this.gridView = {
    data: process(products, this.state),
    total: products.length
  };
}

第二步：处理空过滤值的状态更新 #

要解决清空输入框不触发事件的问题，我们可以通过两种方式处理：

方式一：自定义过滤模板，手动触发更新 #

给需要过滤的列添加自定义过滤输入框，监听input事件，当值为空时强制更新状态：

<kendo-grid [data]="gridView" [sortable]="{ mode: 'multiple' }" [sort]="sort" [filterable]="true" (dataStateChange)="dataStateChange($event)" [height]="500" >
  <kendo-grid-column field="ProductID" title="Product ID" width="120">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <input 
        class="k-textbox" 
        [(ngModel)]="filter.value" 
        (input)="onFilterInput(filter, column)"
        placeholder="Filter ID..."
      />
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <input 
        class="k-textbox" 
        [(ngModel)]="filter.value" 
        (input)="onFilterInput(filter, column)"
        placeholder="Filter Name..."
      />
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <input 
        class="k-textbox" 
        [(ngModel)]="filter.value" 
        (input)="onFilterInput(filter, column)"
        placeholder="Filter Price..."
      />
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

然后在组件里添加onFilterInput方法：

import { FilterDescriptor } from '@progress/kendo-data-query';
import { ColumnComponent } from '@progress/kendo-angular-grid';

// ...

public onFilterInput(filter: FilterDescriptor, column: ColumnComponent): void {
  // 当输入框被清空时，手动更新state并触发数据加载
  if (!filter.value) {
    const updatedFilters = this.state.filters.map(f => 
      f.field === column.field ? { ...f, value: '' } : f
    );
    // 生成新的state对象（必须创建新对象才能触发变更检测）
    this.state = { ...this.state, filters: updatedFilters };
    this.loadProducts();
  }
}

方式二：在dataStateChange中过滤空值条件 #

这种方式不需要修改模板，只需要在状态变化时自动移除值为空的过滤条件，这样当清空输入框时，过滤条件被移除，state发生变化，自然会触发数据更新：

public dataStateChange(state: DataStateChangeEvent): void {
  // 过滤掉所有值为空的过滤条件
  const validFilters = (state.filters as FilterDescriptor[]).filter(f => f.value !== '');
  
  this.state = {
    ...state,
    filters: validFilters.length > 0 ? validFilters : [],
    logic: validFilters.length > 0 ? state.logic : 'and'
  };
  
  this.loadProducts();
}

第三步：优化初始state设置 #

建议初始state不要包含空值的过滤条件，这样可以避免默认的空过滤逻辑，也能减少状态判断的复杂度：

public state: State = {
  logic: "and",
  filters: [] // 初始为空数组，没有默认过滤条件
};

这样处理后，无论是输入字符还是清空输入框，dataStateChange事件都会正常触发，数据也能正确刷新了。

内容的提问来源于stack exchange，提问作者rani boyini