Колонки Span в динамически сгенерированной таблице angular 10

Question

Мне нужно охватить несколько ячеек, если следующий столбец содержит «ноль» или «»; Как на картинке.

Я перенес входные данные, поэтому мне нужно преобразовать их перед созданием таблицы. И я не знаю, как охватить столбцы в динамически сгенерированной таблице.

Я предоставляю демонстрационный код на stackblitz; Я использую пакет angular-material;

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

Answer 1

Вам нужно просто добавить colspan к своим <td>тегам и отобразить их с помощью ngIf, когда данные строки содержат информацию об этом столбце. Что-то вроде этого.https://stackblitz.com/edit/angular-ivy-evfxpi?file=src%2Fapp%2Fapp.component.tsВы также можете проверить эту тему. Как colSpan и row Span добавлены в таблицу материалов Header Angular 7?

Просто исправьте свой шаблон вот так

<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>

и функция, которая генерирует строки

  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;
  }