Sou novo no uso do Angular.
Ao usar um layout de grade, não estou obtendo o que quero. Para depurar, criei o seguinte elemento:
<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>
Como você pode ver, estou imprimindo os valores que espero para grid-columne grid-rowem meus divs.
Minha saída é, por exemplo:
0008 - Internal rating scale
grid-column: 2 / span 1
grid-row: 1 / span 1
Enquanto o estilo definido no elemento é:
height: auto;
border: 1px solid black;
padding: 8px;
grid-area: 3 / 2 / auto / span 1;
De alguma forma, angular (?) reescreve os valores grid-columne para, mas não da maneira correta.grid-rowgrid-area
Não consegui encontrar uma referência sobre o porquê do angular estar fazendo isso e como pará-lo. Verifiquei duas vezes com o Firefox e o Chrome, ambos mostram o mesmo comportamento.
Agradecemos antecipadamente sua ajuda.
Editar: código de exemplo do Stackblitz https://angular-3plybjxk.stackblitz.io