Angular网格布局grid-column/grid-row被转grid-area且值异常求助

我是Angular新手，在使用网格布局时未得到预期效果。为调试我编写了如下元素：

<div *ngFor=" let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
     class="grid-cell text"
     [ngStyle]="{
      'height': 'auto',
      'text-align': 'center !important',
      'border': '1px solid black',
      'padding': '8px',
      'grid-column': tableVersionHeader.columnIndex + 2 + ' / span ' + tableVersionHeader.breadth,
      'grid-row':  tableVersionHeader.level + ' / span ' + ((tableVersionHeader.children!.length === 0 || !tableVersionHeader.isAbstract)) ? (tableVersion.xAxis.rowCount - (tableVersionHeader.level ?? 0)) : 1
     }">
  <p>{{tableVersionHeader.headerVersion?.code}} - {{tableVersionHeader.headerVersion?.label}}</p>
  <p>grid-column: {{tableVersionHeader.columnIndex + 2}} / span {{tableVersionHeader.breadth}}</p>
  <p>grid-row: {{tableVersionHeader.level}} / span {{((tableVersionHeader.children!.length === 0 || !tableVersionHeader.isAbstract)) ? (tableVersion!.xAxis.rowCount - (tableVersionHeader.level ?? 0)) : 1}}</p>
</div>

我在div中打印了预期的grid-column和grid-row值，示例输出如下：

0008 - Internal rating scale

grid-column: 2 / span 1

grid-row: 1 / span 1

但元素上实际应用的样式为：

height: auto;
border: 1px solid black;
padding: 8px;
grid-area: 3 / 2 / auto / span 1;

不知为何Angular会将grid-column和grid-row值改写为grid-area，且结果不正确。我在Firefox和Chrome中均验证了此问题，未找到相关原因及解决方法，恳请帮助。

问题原因及解决方案 #

1. 核心问题：运算符优先级错误 #

你的grid-row表达式存在运算符优先级问题：+的优先级高于三元运算符?:，导致字符串拼接逻辑完全出错。

原表达式执行时，会先把tableVersionHeader.level + ' / span ' + 布尔值拼接成字符串，再对这个字符串执行三元运算，最终得到的结果不是预期的"1 / span 1"，而是错误的数值。浏览器接收到无效的grid-row/grid-column值后，会自动尝试解析为grid-area，最终导致样式异常。

2. 修复代码 #

给整个三元表达式加上括号，确保先计算三元逻辑，再进行字符串拼接。同时建议使用模板字符串拼接，可读性更强：

[ngStyle]="{
  'height': 'auto',
  'text-align': 'center !important',
  'border': '1px solid black',
  'padding': '8px',
  'grid-column': `${tableVersionHeader.columnIndex + 2} / span ${tableVersionHeader.breadth}`,
  'grid-row':  `${tableVersionHeader.level} / span ${((tableVersionHeader.children!.length === 0 || !tableVersionHeader.isAbstract)) ? (tableVersion.xAxis.rowCount - (tableVersionHeader.level ?? 0)) : 1}`
}"

3. 额外优化建议 #

• text-align: center !important建议放到CSS类中维护，尽量避免在ngStyle中使用!important，防止样式冲突。
• 确保数据初始化完成后再渲染DOM，避免可选链/非空断言带来的undefined值导致样式异常。

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