动态生成的表中的跨列角度 10

Question

如果下一列包含“null”或“”，我需要跨越一些单元格；如图所示。

我已经转置了输入数据，所以我需要在创建表之前对其进行转换。 而且我不知道如何跨越动态生成表中的列。

我在 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 也可以查看这个帖子How colSpan and row Span added to material table 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;
  }