重复列时如何与 angular material table 约会

Question

当我只是简单地制作一个table时，我没有重复但添加了 date: "d/M/yyyy"但是当我重复时，我如何检查放置管道以获取日期格式？

不重复时

<ng-container matColumnDef="deliveryDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
            Delivery Date
    </th>
    <td mat-cell *matCellDef="let element">
            {{ element.deliveryDate | date: "d/M/yyyy" }}
    </td>
</ng-container>

重复时


<ng-container
    *ngFor="let column of columns; let i = index"
    [matColumnDef]="column.field"
>
    <mat-header-cell
        class="columnHighLight"
        *matHeaderCellDef
        cdkDropList
        cdkDropListLockAxis="x"
        cdkDropListOrientation="horizontal"
        (cdkDropListDropped)="
            dropListDropped($event, i)
        "
        cdkDrag
        (cdkDragStarted)="dragStarted($event, i)"
        [cdkDragData]="{
            name: column.field,
            columIndex: i
        }"
        mat-sort-header
    >
        {{ column.alias }}

        <!-- {{ column.field }} -->
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
        {{ row[column.field] }}
    </mat-cell>
</ng-container>

Answer 1

通常情况下，可能需要在一个特定的 html 标记上使用多个结构指令。在诸如此类的场景中，我们可能会使用 <div> 或 <ng-container> 等环绕标记。但是 <ng-container> 的美妙之处在于它不会出现在 DOM.

上

Link to better explanation (blog)

解决方案 1：

<ng-container *ngIf="column.field === 'deliveryDate'; else nonDate">
        <mat-cell *matCellDef="let row">
            {{ row[column.field] }}
        </mat-cell>
</ng-container>
<ng-template #nonDate>
        <mat-cell *matCellDef="let row"> {{ row[column.field] | date: "d/M/yyyy" }} </mat-cell>
</ng-template>

重复列时如何与 angular material table 约会

how to datepie with angular material table when repeating columns

angular-material

angular8

angular-material-table