Angular +材質 - 如何在表中添加自定義列（Mat-Table）

Question

如何在mat表中添加自定義列。

如添加包含編輯圖標的編輯列，其中包含當前元素的id。

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

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- Position Column --> 
    <ng-container matColumnDef="position"> 
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container matColumnDef="name"> 
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> 
    </ng-container> 

    <!-- Weight Column --> 
    <ng-container matColumnDef="weight"> 
     <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container matColumnDef="symbol"> 
     <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell> 
    </ng-container> 

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

Answer 1

在您TableBasicExample.ts添加

export class TableBasicExample { 
    displayedColumns = ['position', 'name', 'weight', 'symbol', 'customColumn1']; 
    dataSource = new ExampleDataSource(); 
} 

而在HTML文件中添加列：

<ng-container matColumnDef="customColumn1"> 
    <mat-header-cell *matHeaderCellDef> Custom Title</mat-header-cell> 
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> 
</ng-container> 

Answer 2

什麼你正在努力實現在這個包angular4-material-table也做了，它添加了一些結構來允許行插入，編輯和刪除。您有一個示例在此plunkr上添加自定義操作列。

您可以用您想要的按鈕/動作定義欄：

<mat-table [dataSource]="dataSource"> 
    <ng-container matColumnDef="column1"> 
     <mat-header-cell *matHeaderCellDef> column 1 title </mat-header-cell> 
     <mat-cell *matCellDef="let row"> 
      <!-- col 1 --> 
     </mat-cell> 
    </ng-container> 
    <ng-container matColumnDef="column2"> 
     <mat-header-cell *matHeaderCellDef> column 2 title </mat-header-cell> 
     <mat-cell *matCellDef="let row"> 
      <!-- col 2 --> 
     </mat-cell> 
    </ng-container> 
    <ng-container matColumnDef="actionsColumn"> 
     <mat-header-cell *matHeaderCellDef> 
      <button (click)="createNew()">Create new</button> 
     </mat-header-cell> 
     <mat-cell *matCellDef="let row"> 
      <button (click)="edit()">Edit</button> 
      <button (click)="cancelOrDelete()">Cancel</button> 
     </mat-cell> 
    </ng-container> 
    <mat-header-row *matHeaderRowDef="displayedColumns"> 
    </mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"> 
    </mat-row> 
</mat-table> 

必須包括displayedColumns字符串數組列：

displayedColumns = ['column1', 'column2', 'actionsColumn'];