如何同步两个wj-flex-grid的行高以匹配内容？

一、先修复resizedRow事件不触发的问题 #

你的事件绑定和组件通信逻辑存在疏漏，先把基础的事件触发打通：

修正子组件（grid.component）的代码 #

首先确保子组件正确绑定事件并暴露表格实例：

<!-- grid.component.html -->
<wj-flex-grid (resizedRow)="onResizedRow($event)">
  <!-- 你的表格列、数据源配置 -->
</wj-flex-grid>

// grid.component.ts
import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
import { CellRangeEventArgs } from '@grapecity/wijmo.grid';
import { WjFlexGrid } from '@grapecity/wijmo.angular2.grid';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent {
  @Output() resizedRow = new EventEmitter<CellRangeEventArgs>();
  // 暴露表格实例给父组件
  @ViewChild(WjFlexGrid) wjFlexGrid!: WjFlexGrid;

  onResizedRow(args: CellRangeEventArgs): void {
    this.resizedRow.emit(args);
  }
}

父组件绑定事件并实现同步 #

给两个子组件加模板引用，方便获取实例：

<!-- 父组件html -->
<app-grid #gridLeft (resizedRow)="syncRowHeights($event, gridLeft)"></app-grid>
<app-grid #gridRight (resizedRow)="syncRowHeights($event, gridRight)"></app-grid>

// 父组件ts
import { Component, ViewChild } from '@angular/core';
import { GridComponent } from './grid/grid.component';
import { CellRangeEventArgs } from '@grapecity/wijmo.grid';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('gridLeft') gridLeft!: GridComponent;
  @ViewChild('gridRight') gridRight!: GridComponent;

  syncRowHeights(args: CellRangeEventArgs, sourceGrid: GridComponent): void {
    const rowIndex = args.range.row;
    // 获取触发调整的行高
    const sourceHeight = args.panel.rows[rowIndex].height;
    // 找到另一个表格并同步行高
    const targetGrid = sourceGrid === this.gridLeft ? this.gridRight : this.gridLeft;
    
    if (targetGrid.wjFlexGrid.rows[rowIndex]) {
      targetGrid.wjFlexGrid.rows[rowIndex].height = sourceHeight;
      // 刷新表格确保行高生效
      targetGrid.wjFlexGrid.invalidate();
    }
  }
}

二、处理内容变化导致的自动行高同步 #

如果行高是因为内容换行自动变化（不是手动拖拽调整），还要监听表格的内容加载事件：
在子组件的ngAfterViewInit里添加监听：

// grid.component.ts
ngAfterViewInit(): void {
  // 表格加载完行数据后触发
  this.wjFlexGrid.loadedRows.subscribe(() => {
    this.wjFlexGrid.rows.forEach((row, index) => {
      // 模拟resizedRow事件，通知父组件同步
      this.resizedRow.emit({
        range: { row: index, col: 0, row2: index, col2: 0 },
        panel: this.wjFlexGrid.rows
      } as CellRangeEventArgs);
    });
  });
}

同时优化父组件的同步逻辑，取两个表格对应行的最大高度统一设置：

// 父组件ts
syncRowHeights(args: CellRangeEventArgs, sourceGrid: GridComponent): void {
  const rowIndex = args.range.row;
  const leftHeight = this.gridLeft.wjFlexGrid.rows[rowIndex].height;
  const rightHeight = this.gridRight.wjFlexGrid.rows[rowIndex].height;
  const maxHeight = Math.max(leftHeight, rightHeight);

  this.gridLeft.wjFlexGrid.rows[rowIndex].height = maxHeight;
  this.gridRight.wjFlexGrid.rows[rowIndex].height = maxHeight;

  this.gridLeft.wjFlexGrid.invalidate();
  this.gridRight.wjFlexGrid.invalidate();
}

三、排查要点 #

• 确认项目已正确引入Wijmo的WjGridModule到模块的imports数组
• 区分resizingRow（调整中）和resizedRow（调整结束）事件，你需要的是后者
• 子组件的@Output事件名称要和父组件绑定的名称完全一致

内容的提问来源于stack exchange，提问作者Shruti Saraf