Angular+AG Grid中按单元格值渲染不同Material组件的实现问询

第一步：创建通用动态单元格渲染组件 #

首先新建一个Angular组件，作为AG Grid的自定义渲染器，根据第一列的字段值判断要渲染的组件类型。

组件逻辑代码（dynamic-cell.component.ts） #

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  selector: 'app-dynamic-cell',
  templateUrl: './dynamic-cell.component.html'
})
export class DynamicCellComponent implements ICellRendererAngularComp {
  private typeFlag: string;
  public params: ICellRendererParams;

  // AG Grid初始化时传入单元格参数
  agInit(params: ICellRendererParams): void {
    this.params = params;
    // 将此处的typeColumn替换为你第一列的实际字段名
    this.typeFlag = params.data.typeColumn;
  }

  // 行数据更新时自动触发刷新
  refresh(params: ICellRendererParams): boolean {
    this.params = params;
    this.typeFlag = params.data.typeColumn;
    return true;
  }
}

组件模板代码（dynamic-cell.component.html） #

用ngSwitch匹配类型标识，渲染对应Material组件：

<div [ngSwitch]="typeFlag">
  <!-- 类型为1时渲染复选框 -->
  <mat-checkbox 
    *ngSwitchCase="'1'" 
    [checked]="params.value"
    (change)="params.setValue($event.checked)"
  ></mat-checkbox>

  <!-- 类型为2时渲染下拉选择器 -->
  <mat-select 
    *ngSwitchCase="'2'"
    [value]="params.value"
    (selectionChange)="params.setValue($event.value)"
  >
    <mat-option value="opt1">选项1</mat-option>
    <mat-option value="opt2">选项2</mat-option>
    <!-- 选项可根据业务扩展，也可从params的自定义参数中获取动态选项 -->
  </mat-select>

  <!-- 按需扩展其他类型对应的组件 -->
  <mat-slider *ngSwitchCase="'3'" [value]="params.value" (valueChange)="params.setValue($event)"></mat-slider>
  <mat-slide-toggle *ngSwitchCase="'4'" [checked]="params.value" (change)="params.setValue($event.checked)"></mat-slide-toggle>
</div>

第二步：在AG Grid配置中注册自定义渲染器 #

在使用AG Grid的业务组件中，配置第二列的渲染规则：

import { DynamicCellComponent } from './dynamic-cell/dynamic-cell.component';

// AG Grid列配置
public columnDefs = [
  { field: 'typeColumn', headerName: '类型标识' }, // 第一列：控制渲染类型的字段
  { 
    field: 'dynamicContent', 
    headerName: '动态内容',
    cellRenderer: DynamicCellComponent, // 绑定自定义渲染组件
    editable: true,
    // 如需传入自定义参数（比如动态下拉选项）可加以下配置
    // cellRendererParams: { selectOptions: [...] }
  }
];

// 注册自定义组件到AG Grid
public frameworkComponents = {
  dynamicCell: DynamicCellComponent
};

注意事项 #

• 需在当前模块的declarations数组中加入DynamicCellComponent，同时提前导入所需的Angular Material模块（MatCheckboxModule、MatSelectModule等）和AgGridModule
• 若第一列的类型标识会动态修改，AG Grid会自动调用渲染组件的refresh方法更新渲染内容，无需手动处理
• 组件的值变化时调用params.setValue()会自动同步到AG Grid的行数据中，如需触发后续业务逻辑可监听AG Grid的cellValueChanged事件

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