gridster2中Grid Item不显示但审查元素可见问题求助

架构老林

2026-9-27

Gridster2 网格显示但Item不可见排查方向

1. 组件代码语法错误
  你贴出的配置代码存在语法问题，options对象未正确闭合就直接在内部定义了dashboard数组，会导致Gridster配置解析失败，无法正确映射Item属性。修正后的代码如下：

this.options = {
    gridType: GridType.Fit,
    fixedRowHeight: 10,
    maxCols: 50,
    maxRows: 50,
    pushItems: false,
    draggable: {
        enabled: false
    },
    resizable: {
        enabled: false
    }
}; // 补全options对象闭合

// 单独定义dashboard数组，不要写在options内部
this.dashboard = [
    {
        cols: 2,
        rows: 1,
        y: 0,
        x: 0,
        label: 'Table1 1'
    },
    {
        cols: 2,
        rows: 2,
        y: 0,
        x: 2,
        label: 'Table 2'
    }
];

1. 容器高度缺失
  你使用的GridType.Fit适配模式要求gridster容器必须有明确的高度才能计算Item缩放比例，如果.gridsterfit类或父级.card-body没有设置固定高度/最小高度，会导致grid-item高度被压缩为0不可见。可以先添加临时样式验证：

.gridsterfit {
  min-height: 500px;
}

1. 行高配置过小
  你设置的fixedRowHeight: 10单位为px，结合Item只有1_{2行的配置，Item实际高度仅为10}20px，再加上默认边距挤压，内容会被直接隐藏。可以先把fixedRowHeight调整到50以上测试。
1. 内容显示逻辑问题
  你的Label用了*ngIf="!item.hasContent"判断，但你定义的所有Item都没有hasContent属性，若全局逻辑默认给Item赋值了hasContent=true，会直接导致Label不渲染。可以先去掉ngIf判断直接输出Label验证。
1. 样式覆盖问题
  检查全局样式或组件样式是否对gridster-item、button-holder、label设置了opacity: 0、z-index: -1、overflow: hidden这类属性，这类规则会导致DOM存在但肉眼不可见，可以在审查元素时查看对应节点的样式规则确认。