Angular项目中ag-grid同一单元格同时渲染头像与姓名的实现问题

问题原因 #

1. Name列的cellRenderer参数解构错误：cellRenderer回调的入参是完整的params对象，头像、姓名都存放在params.data属性下，直接从顶层解构avatar只能拿到undefined，导致图片src无效无法加载。
2. 缺少姓名展示逻辑：现有cellRenderer只返回了图片标签，没有拼接姓名字段。

解决方案 #

直接修改columnDefs中Name列的cellRenderer逻辑，正确从params.data中取字段，同时拼接头像和姓名的DOM结构，添加简单的对齐样式即可匹配参考效果：

columnDefs = [
    { 
        headerName: "Name",
        field: "name",
        cellRenderer: (params: any) => {
            // 避免行数据为空时报错
            if(!params.data) return '';
            // flex布局实现头像和姓名垂直居中对齐
            return `
            <div style="display: flex; align-items: center; gap: 8px;">
                <img style="height: 24px; width: 24px; border-radius: 50%;" src="${params.data.avatar}" alt="头像" />
                <span>${params.data.name}</span>
            </div>
            `
        }
    },
    // 其余列配置保持不变
]

如果修改后头像仍无法加载，可检查两项配置：

• 确认assets/img/patient.png文件真实存在，路径拼写无错误
• 检查angular.json中projects -> [你的项目名] -> architect -> build -> options -> assets配置项已包含src/assets目录，确保静态资源会被正确打包

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