Kolom span dalam sudut tabel yang dihasilkan dinamis 10

Question

Saya perlu menjangkau beberapa sel jika kolom berikutnya berisi "null" atau ""; Seperti pada gambar.

Saya telah mengubah urutan data input, jadi saya perlu mengubahnya sebelum membuat tabel. Dan saya tidak tahu bagaimana merentang kolom dalam tabel yang dihasilkan dinamis.

Saya memberikan kode demo di stackblitz; Saya menggunakan paket material bersudut;

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

Answer 1

Anda hanya perlu menambahkan colspan ke <td>tag Anda dan merendernya dengan ngIf ketika data baris memiliki informasi tentang kolom ini. Smth seperti ini.https://stackblitz.com/edit/angular-ivy-evfxpi?file=src%2Fapp%2Fapp.component.tsAnda juga dapat memeriksa utas ini Bagaimana colSpan dan baris Span ditambahkan ke tabel material Header Angular 7?

Perbaiki saja template Anda seperti ini

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

dan fungsi yang menghasilkan baris

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