Colonnes de travée dans une table angulaire générée dynamique 10

Question

J'ai besoin de couvrir certaines cellules si la colonne suivante contient "null" ou ""; Comme sur la photo.

J'ai transposé les données d'entrée, je dois donc les transformer avant de créer une table. Et je ne sais pas comment répartir les colonnes dans une table générée dynamique.

Je fournis un code de démonstration sur stackblitz; J'utilise un emballage en matériau angulaire;

https://stackblitz.com/edit/angular-ivy-hknwsw?file=src%2Fapp%2Fapp.component.ts

Answer 1

Vous devez simplement ajouter colspan à vos <td>balises et les rendre avec ngIf lorsque les données de ligne contiennent des informations sur cette colonne. Smth comme ça.https://stackblitz.com/edit/angular-ivy-evfxpi?file=src%2Fapp%2Fapp.component.tsVous pouvez également vérifier ce fil Comment colSpan et row Span ajoutés à la table des matériaux Header Angular 7?

Corrigez simplement votre modèle comme ça

<mat-card>
    <table mat-table [dataSource]="rowsInfo" class="mat-elevation-z4">
      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

      <ng-container
        [matColumnDef]="column"
        *ngFor="let column of columnDefs"
      >
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <ng-container
            *matCellDef="let element"
        >
          <td
            mat-cell
            *ngIf="element[column] !== undefined"
            [attr.colspan]="element[column].colspan"
            [ngStyle]="{ 'text-align': column === 'name' ? 'left' : '' }"
          >
            {{ element[column].value }}
          </td>
        </ng-container>
      </ng-container>

      <tr
        mat-header-row
        *matHeaderRowDef="columnDefs"
      ></tr>
      <tr mat-row *matRowDef="let row; columns: columnDefs"></tr>
    </table>
  </mat-card>

et la fonction qui génère des lignes

  public mapRows(datas: ColumnData[]): {}[] {
    const result = [
      {
        name: {
          value: "row1",
          colspan: 1
        }
      },
      {
        name: {
          value: "row2",
          colspan: 1
        }
      },
      {
        name: {
          value: "row3",
          colspan: 1
        }
      },
    ];

    for (let index = 0; index < datas.length; index++) {
      const element = datas[index];
      const propName = `prop${index}`; const prevPropName = `prop${index - 1}`;
      const hasPrevProp = index > 0;

      if (element.field1 || !hasPrevProp) {
        result[0][propName] = {
          value: element.field1,
          colspan: 1
        };
      } else {
        result[0][prevPropName].colspan++;
      }

      if (element.field2 || !hasPrevProp) {
        result[1][propName] = {
          value: element.field2,
          colspan: 1
        };
      } else {
        result[1][prevPropName].colspan++;
      }

      if (element.field3 || !hasPrevProp) {
        result[2][propName] = {
          value: element.field3,
          colspan: 1
        };
      } else {
        result[2][prevPropName].colspan++;
      }
    }

    return result;
  }