DevExtreme DataGrid操作Lookup数据后状态列失效问题求助

在操作DevExtreme DataGrid的Lookup状态列时，修改Lookup数据源（比如过滤states列表）后，状态列会出现无法正常工作的异常，添加新值时问题会复现。

问题代码分析 #

出现问题的核心原因是直接替换了数组引用：

logEvent(eventName) {
  this.states = this.states.filter((x) => x.ID === 5);
  this.events.unshift(eventName);
}

Angular中DevExtreme组件依赖数组的引用稳定性追踪数据变化，用filter返回的新数组直接替换原this.states，会导致组件无法感知数据源更新，进而引发Lookup列失效。

解决方法 #

方法1：保留原数组引用，修改内部内容

不替换数组，清空原数组后添加过滤后的元素，保持引用不变：

logEvent(eventName) {
  // 清空原数组，保留引用
  this.states.length = 0;
  // 将过滤后的元素添加到原数组中
  this.states.push(...this.states.filter(x => x.ID === 5));
  this.events.unshift(eventName);
}

方法2：手动触发Angular变更检测

如果需要替换数组，可以注入ChangeDetectorRef手动通知组件检测数据变化：
首先在组件中注入依赖：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

然后修改事件处理代码：

logEvent(eventName) {
  this.states = this.states.filter(x => x.ID === 5);
  this.events.unshift(eventName);
  // 手动触发变更检测，让组件感知到数据源变化
  this.cdr.detectChanges();
}

原理说明 #

DevExtreme DataGrid的Lookup列通过监听数据源的引用变化更新视图，直接替换数组引用会打破绑定关系。通过保留原数组引用修改内容，或者手动触发变更检测，都能让组件正确识别数据源更新，恢复Lookup列的正常功能。

内容的提问来源于stack exchange，提问作者Murat Gözcü