Início / coding / Perguntas / 79552342
Accepted
Prophet
Asked: 2025-04-03 16:13:43 +0800 CST

Comportamento do layout da grade angular

  • 772

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

html

2 respostas

  1. Best Answer

    O problema era que os colchetes estavam faltando, o que pode ter causado o erro de cálculo.

    <div *ngFor="let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
    class="grid-cell text"
    style="height:auto;text-align:center !important; border: 1px solid black;padding:8px;"
    [ngStyle]="{
      '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),
    }"
    >

    Código completo:

    <div *ngIf="tableVersion && tableVersion.xAxis" class="overflow-auto">
  <div class="grid-container"
        [style.display] = "'grid'"
        [style.grid-template-columns] = "'25% repeat(' + tableVersion!.xAxis!.columnCount + ', minmax(200px, 300px))'"
        [style.grid-template-rows] = "' repeat(' + tableVersion!.xAxis!.rowCount + ', 1fr)'"
      >

    <div class="grid-cell"
          [style.height]= "'auto'"
          [style.border]= "'1px solid black'"
          [style.padding]= "'8px'"
          [style.grid-column]= "'1 / span 1'"
          [style.grid-row] = "'1 / span ' + tableVersion!.xAxis!.rowCount"
    ></div>

    <div *ngFor="let tableVersionHeader of tableVersion.xAxis.tableVersionHeaders"
        class="grid-cell text"
        style="height:auto;text-align:center !important; border: 1px solid black;padding:8px;"
        [ngStyle]="{
          '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>
</div>

    Demonstração do Stackblitz

    • 2

  2. Aparentemente, o Renderer2 faz uma otimização para converter grid-row + grid-col em grid area para simplificação.

    Você pode sair dessa simplificação marcando uma das propriedades como importante (mas não ambas!)

    insira a descrição da imagem aqui

    Do exemplo do stackblitz bifurcado .

    No entanto, não vejo nenhuma mudança na sua versão, quando gird-column/row é otimizado para gird-area, então parece que essa otimização está correta. Você pode verificar isso, talvez apontar onde exatamente você espera um estilo diferente?

    • 1

relate perguntas