角度材料表內的內容投影

Question

而不是將數據顯示到表格的常規方式。 我正在嘗試創建我的自定義表組件並通過 .

像這樣：

 <table mat-table [dataSource]="dataSource"> <!-- I want to Render the header and cell data here --> <ng-content></ng-content> <mat-header-row *matHeaderRowDef="headers; sticky: true"></mat-header-row> <mat-row *matRowDef="let row; columns: headers;"></mat-row> </table>

所以我可以像這樣調用這個自定義組件：

 <app-customized-table> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef> Id </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.Id}} </mat-cell> </ng-container> ...etc </app-customized-table>

但是，它不會檢測內容。 這是我正在嘗試做的一個 stackblitz 示例。

https://stackblitz.com/edit/angular-qwvcln?file=src%2Fapp%2Fcustom-table.component.ts

有沒有辦法做到這一點？

謝謝。

Answer 1

聚會有點晚，但我遇到了同樣的挑戰，並能夠按如下方式解決它：

您可以通過使用@ContentChildren和@ViewChild功能以編程方式將列定義添加到表中來解決它：

你的模板文件（例如customized-table.component.html ）：

<table mat-table [dataSource]="dataSource">
    <ng-content></ng-content>

    <mat-header-row *matHeaderRowDef="headers; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: headers;"></mat-row>
</table>

你的代碼隱藏（例如customized-table.component.ts ）：

@Component({
    selector: 'app-customized-table',
    templateUrl: './customized-table.component.html'
})
export class CustomizedTableComponent<T> implements AfterContentInit {
    constructor() { }

    @Input() dataSource: T[]; // or whatever type of datasource you have
    @Input() headers: string[];

    // this is where the magic happens: 
    @ViewChild(MatTable, { static: true }) table: MatTable<T>;
    @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;

    // after the <ng-content> has been initialized, the column definitions are available.
    // All that's left is to add them to the table ourselves:
    ngAfterContentInit() {
        this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
    }
}

現在，您可以使用：

<app-customized-table [headers]="headers">
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Id}} </mat-cell>
    </ng-container>
    ...etc
</app-customized-table>

使用延遲加載模塊的 Stackblitz 工作演示

Answer 2

您必須采取一種非常不同的方法才能使其發揮作用。 正如您所注意到的，mat-table 不能將其內容包裝在其他東西中。 一種可能性是僅將數據提供給您的自定義組件，而不是將 DOM 作為內容提供。 例如：

成分：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-custom-table',
  template: `
    <div>
      {{name}}

      <div class="example-container mat-elevation-z8">
        <table mat-table [dataSource]="dataSource">

          <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

          <ng-container *ngFor="let column of displayedColumns; index as i" >

            <ng-container [matColumnDef]="column">
              <mat-header-cell *matHeaderCellDef>{{ columnLabels[i] }}</mat-header-cell>
              <mat-cell mat-cell *matCellDef="let element"> {{element[valueKeys[i]]}} </mat-cell>
            </ng-container>

          </ng-container>

        </table>
      </div>

      asd
    </div>
  `
})
export class CustomTable implements OnInit {
  @Input() public columnLabels: any[];
  @Input() public displayedColumns;
  @Input() public dataSource;
  @Input() public name: any;
  @Input() public valueKeys: any[];

  constructor() { }

  ngOnInit() {
  }

}

用法：

<app-custom-table name="sdf" 
    [dataSource]="dataSource" 
    [displayedColumns]="displayedColumns"
    [columnLabels]="columnLabels" 
    [valueKeys]="displayedColumns">

</app-custom-table>

在哪里：

displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
columnLabels = ['No.', 'Name', 'Weight', 'Symbol'];

但即使這樣，也可能會有更多的挑戰。

Answer 3

您可以像這樣投影內容：

<ng-container *ngFor=”let column of displayedColumns” matColumnDef=”{{column.id}}”>
   <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.name}}</th>
   <td mat-cell *matCellDef=”let row”>
      {{row[column.id]}}
   </td>
</ng-container>

然后你傳遞內容投影的模板：

<my-component …
[itemTemplate]=”itemTemplate”>
   <ng-template let-item #itemTemplate>
      column id: {{item.column.id}}
      value: {{item.value}}
   </ng-template>
</my-component>

來源