主页 / user-6066067

Prophet's questions

Martin Hope
Prophet
Asked: 2025-04-03 16:13:43 +0800 CST
  • 8

我是使用 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>

grid-column正如您所看到的，我正在打印我期望grid-row的 div 中的值。

我的输出例如：

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;

不知何故，角度（？）将grid-column和grid-row值重写为grid-area但方式不正确。

我找不到关于 angular 为什么会这样做以及如何阻止它的参考。我使用 Firefox 和 Chrome 进行了双重检查，两者都显示相同的行为。

提前感谢您的帮助。

编辑：Stackblitz 示例代码 https://angular-3plybjxk.stackblitz.io

html