Question

我在角度4世界中相当新，我正在尝试为每一行添加“编辑/删除”按钮。使用Angular 4的Angular Material设计中的md-table组件中的标题列是'Action'。我该怎么做？自定义标题栏＆amp;每行按钮。任何可用的模板吗？下面是我的HTML代码。

userinfo.html

<!-- ID Column -->
<ng-container cdkColumnDef="username">
<md-header-cell *cdkHeaderCellDef> User Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.username}} </md-cell>
</ng-container>

<!-- Email Column -->
<ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef> Email </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>

<!-- First Name Column -->
<ng-container cdkColumnDef="userFirstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell>
</ng-container>

<!-- Last Name Column -->
<ng-container cdkColumnDef="userLastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell>
</ng-container> 

<!-- Phone Column -->
<ng-container cdkColumnDef="userMobile">
<md-header-cell *cdkHeaderCellDef> Phone </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.userMobile}} </md-cell>
</ng-container> 

<!-- Role Column -->
<ng-container cdkColumnDef="authority">
<md-header-cell > Role </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.authority}} </md-cell>
</ng-container> 

<!-- Action Column 
<md-header-cell > Action </md-header-cell>
<md-cell  > <button md-raised-button >Edit</button> </md-cell> -->

<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

Answer 1

您走在正确的轨道上，您只需要将actions项添加到displayedColumns列表中;

displayedColumns = ["username","email","userFirstName" ...  ,"actions"];

和

<ng-container cdkColumnDef="actions">
    <md-header-cell > Actions </md-header-cell>
    <md-cell *cdkCellDef="let row" >
         <button md-raised-button >Edit</button> 
    </md-cell>
</ng-container>

Answer 2

对于那些寻找 6及以上

的人

在您的.ts

中

displayedColumns = ["username","email","userFirstName" ...  ,"actions"];

和您的html

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>   
  <td mat-cell *matCellDef="let element"> 
    <button mat-raised-button >Edit</button> 
  </td>
</ng-container>

Answer 3

IList<IObservable<T>>

Answer 4

.ts 文件代码：

args

HTML 文件代码：

export interface tableColumns 
{ 
    username:string, 
    email:string, 
    userFirstName:string, 
    ..., 
    actions: string 
} 
displayedColumns: string[] = [ 'username','email','userFirstName', ... ,'actions'];

dataSource: MatTableDataSource; // for table dataSource

每行的“编辑/删除”按钮＆amp; header列是md-table组件中的'Action'

4 个答案:

.ts 文件代码：

HTML 文件代码：