如何在Angular的ag-grid组件中实现复选框控制的文本换行功能

• 第一步：在组件类中声明控制变量与ag-grid相关配置

import { Component } from '@angular/core';
import { ColDef, GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-ag-grid-wrap-demo',
  templateUrl: './ag-grid-wrap-demo.component.html',
  styleUrls: ['./ag-grid-wrap-demo.component.css']
})
export class AgGridWrapDemoComponent {
  // 自动换行控制变量
  isWrapTextEnabled = false;
  private gridApi!: GridApi;

  // 列定义，动态绑定换行相关属性
  colDefs: ColDef[] = [
    {
      field: 'content',
      headerName: '文本内容',
      flex: 1,
      // 动态绑定换行和自动行高属性
      wrapText: () => this.isWrapTextEnabled,
      autoHeight: () => this.isWrapTextEnabled
    },
    // 其余列定义可自行扩展
  ];

  rowData = [
    { content: '这是一段很长的测试文本，用于验证ag-grid单元格自动换行功能是否正常生效，当换行功能开启后这段文本会自动拆分为多行展示' },
    // 其余行数据可自行扩展
  ];

  // 初始化时获取gridApi实例
  onGridReady(params: any) {
    this.gridApi = params.api;
  }

  // 换行开关切换回调
  onWrapToggle() {
    // 重置所有行高度，让换行配置立即生效
    this.gridApi.resetRowHeights();
  }
}

• 第二步：模板中添加复选框控件与ag-grid组件绑定

<!-- 启停复选框 -->
<div style="margin-bottom: 12px;">
  <input 
    type="checkbox" 
    id="wrapTextToggle" 
    [(ngModel)]="isWrapTextEnabled" 
    (change)="onWrapToggle()"
  >
  <label for="wrapTextToggle">启用单元格文本自动换行</label>
</div>

<!-- ag-grid组件 -->
<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="colDefs"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

注意事项：

1. 必须同时配置wrapText和autoHeight两个属性，仅开启wrapText会出现文本被固定行高截断的问题
2. 如果全局或单列配置了固定rowHeight，需要移除该配置，否则autoHeight不会生效
3. 切换开关后必须调用gridApi.resetRowHeights()，否则新的换行配置需要滚动表格触发行重绘才会生效

内容的提问来源于stack exchange，提问作者Ugesh Gali