Кнопка "Редактировать/Удалить" для каждого столбца столбца и заголовка "Действие" в компоненте md-table

Я совершенно новый в мире angular 4, и я пытаюсь добавить кнопку "Редактировать/Удалить" для каждого столбца строки и заголовка "Действие" в компоненте md-table в angular Конструкция материала с angular 4. Как я могу это сделать? настраиваемый столбец заголовка и кнопки для каждой строки. любой шаблон доступен для этого? ниже мой 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>

Ответ 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>

Ответ 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>

Ответ 3

когда нажата кнопка редактирования, она действует для всей строки... как заставить ее работать для выбранной строки? /

Ответ 4

<ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary">
        <mat-icon aria-label="Edit">edit</mat-icon>
      </button>
    <button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn">
        <mat-icon aria-label="Delete">delete</mat-icon>
      </button>
  </mat-cell>
</ng-container>

Ответ 5

Чтобы выполнить логику редактирования/удаления для каждой строки, вы можете использовать angular4-material-table пакет, основанный на угловом4 + Таблица cdk.