tutorial form example disabled card angular material-design angular-material angular-components angular-forms

angular - form - El botón "Editar/Eliminar" para cada fila y columna de encabezado es ''Acción'' en el componente md-table



mat-form-field (3)

Soy bastante nuevo en el mundo de angular 4 y estoy tratando de agregar el botón "Editar / Eliminar" para cada fila y columna de encabezado que es ''Acción'' en el componente md-table en el diseño de Material angular con Angular 4. ¿Cómo puedo hacerlo? ¿esta? Columna de encabezado y botones personalizados para cada fila. ¿Alguna plantilla disponible para hacer esto? A continuación se muestra mi código 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>


Está en el camino correcto, solo necesita agregar un elemento de actions a la lista de displayedColumns ;

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

y:

<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>


Para los que buscan 6 o más.

En tu .ts

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

y en tu 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>


<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>