Angular中Ag-Grid集成Storybook失效，仅渲染空div，求排查方案

针对你遇到的仅渲染空div的问题，以下是遗漏的配置和代码修正点：

1. 必加Ag-Grid高度配置 #

Ag-Grid默认高度为0，必须显式设置高度才能正常渲染。在模板中添加固定高度样式或绑定动态高度属性：

render: (args) => ({
    props: {
        ...args,
    },
    template: `    
    <ag-grid-angular
        style="height: 400px; width: 100%;"
        [rowHeight]=50
        [headerHeight]=44
        [suppressCellFocus]=true
        [rowData]="rowData"
        [columnDefs]="columnDefs"
    >
    </ag-grid-angular>
    `
}),

注：避免依赖argsToTemplate，显式绑定核心属性更可靠，防止属性绑定失败。

2. 修正模块导入 #

moduleMetadata中只需导入AgGridModule，无需重复导入AgGridAngular组件（AgGridModule已导出该组件）：

decorators: [
    moduleMetadata({
      imports: [AgGridModule],
    }),
],

3. 导入Ag-Grid样式 #

在Story文件顶部或Storybook的preview.ts中导入Ag-Grid基础样式，否则表格结构会因缺失样式支撑显示异常：

// 在Story文件顶部添加
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

你可以根据需求替换为其他主题样式，比如ag-theme-balham等。

4. 优化主题绑定 #

为表格添加主题类，确保样式正常加载，可在args中统一配置或直接写入模板：

export const grid_cell: Story = {
    args: {
        rowData: [
            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
            { make: "Ford", model: "F-Series", price: 33850, electric: false },
            { make: "Toyota", model: "Corolla", price: 29600, electric: false },
        ],
        columnDefs: [
            { field: "make" },
            { field: "model" },
            { field: "price" },
            { field: "electric" }
        ],
        class: 'ag-theme-alpine'
    }
};

最终完整代码示例 #

import { Meta, StoryObj } from '@storybook/angular';
import { AgGridAngular } from 'ag-grid-angular';
import { AgGridModule } from 'ag-grid-angular';
// 导入Ag-Grid样式
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const meta: Meta<AgGridAngular> ={
    title: 'GridCell',
    component: AgGridAngular,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
          imports: [AgGridModule],
        }),
      ],
    render: (args) => ({
        props: {
            ...args,
        },
        template: `    
        <ag-grid-angular
            [class]="class"
            style="height: 400px; width: 100%;"
            [rowHeight]=50
            [headerHeight]=44
            [suppressCellFocus]=true
            [rowData]="rowData"
            [columnDefs]="columnDefs"
        >
        </ag-grid-angular>
        `
    }),
};

export default meta;
type Story = StoryObj<AgGridAngular>;
export const grid_cell: Story = {
    args: {
        rowData: [
            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
            { make: "Ford", model: "F-Series", price: 33850, electric: false },
            { make: "Toyota", model: "Corolla", price: 29600, electric: false },
        ],
        columnDefs: [
            { field: "make" },
            { field: "model" },
            { field: "price" },
            { field: "electric" }
        ],
        class: 'ag-theme-alpine'
    }
};

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