角度农业网格不适用于故事书

Question

我想为我的 ag-grid 组件创建一本故事书。我已经尝试了其他角度分量所遵循的常用方法。但这似乎不起作用。

const meta: Meta<AgGridAngular> ={
    title: 'GridCell',
    component: AgGridAngular,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
          imports: [AgGridAngular, AgGridModule],
        }),
      ],
    render: (args) => ({
        props: {
            ...args,
        },
        template: `    
        <ag-grid-angular
            [rowHeight]=50
            [headerHeight]=44
            [suppressCellFocus]=true
            ${argsToTemplate(args)}
        >
        </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" }
        ]
    }
};

这只是渲染一个空的 div。我无法找到很多资源来将故事书与 Angular 中的 ag-grid 集成。我错过了什么？

Answer 1

验证问题的一种方法是检查开发工具中的元素。如果您能够看到标题和单元格的与网格相关的文档元素，那么这表明网格正在正确渲染，但没有给出高度和宽度。

您可能想尝试将 ag-grid-angle 组件上的样式属性设置为高度和宽度为 100%。