DevExtreme DataGrid详情行点击状态更新延迟问题求助

针对主从DataGrid中点击详情行后showAddHorario状态有时首次不生效的问题，可从以下方向处理：

1. 手动触发Angular变更检测 #

DevExtreme部分事件可能在Angular变更检测周期外执行，导致视图未及时更新。通过ChangeDetectorRef手动触发检测：

• 先注入依赖：

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

constructor(private cdr: ChangeDetectorRef) {}

• 修改onRowClick方法：

onRowClick(event: RowClickEvent, sala: GetSalasByServiceResponse): void {
    const horario: GetSalasByServicoHorarioResponse = event.data;
    const horarioData: GetSalaByServicoHorarioDiarioResponse[] = event.data.horariosDiarios || [];
    
    this.selectedHorarioData = horario;
    // 生成新数组确保引用变更，触发变更检测
    this.horariosDiarios = [...horarioData];
    this.selectedSala = sala;
    this.showAddHorario = true;
    
    // 手动触发变更检测
    this.cdr.detectChanges();
}

2. 用NgZone包裹事件逻辑 #

确保状态更新操作在Angular的Zone内执行，自动触发变更检测：

• 注入NgZone：

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

constructor(private ngZone: NgZone) {}

• 修改onRowClick方法：

onRowClick(event: RowClickEvent, sala: GetSalasByServiceResponse): void {
    this.ngZone.run(() => {
        const horario: GetSalasByServicoHorarioResponse = event.data;
        const horarioData: GetSalaByServicoHorarioDiarioResponse[] = event.data.horariosDiarios || [];
        
        this.selectedHorarioData = horario;
        this.horariosDiarios = [...horarioData];
        this.selectedSala = sala;
        this.showAddHorario = true;
    });
}

3. 排查变量状态干扰 #

• 检查是否有其他异步逻辑（如HTTP请求、定时器）修改了showAddHorario的值，导致首次点击的设置被覆盖。
• 确认绑定showAddHorario的视图（如*ngIf="showAddHorario"）没有嵌套在未触发变更检测的容器中。

内容的提问来源于stack exchange，提问作者Nelson Aguiar