1

在这里，我正在尝试在每行的角度材料可扩展表中使用一个操作按钮（编辑）。当我单击编辑按钮时，它不起作用，但行被扩展。

问题：-

  1. 当点击编辑按钮应该在点击时工作并且行不应该被扩展。
  2. 当单击没有编辑按钮的行的其他部分时，只会扩展行。

这是我的代码：

viewuser.component.html

<table mat-table [dataSource]="tableData" multiTemplateDataRows class="mat-elevation-z8"><ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef>Name </th>
    <td mat-cell *matCellDef="let element">{{ element.f_name }} {{ element.l_name}} </td></ng-container><ng-container matColumnDef="Designation">
    <th mat-header-cell *matHeaderCellDef>Designation </th>
    <td mat-cell *matCellDef="let element"> {{ element.title }}</td></ng-container><ng-container matColumnDef="Department">
    <th mat-header-cell *matHeaderCellDef>Department </th>
    <td mat-cell *matCellDef="let element"> {{element.dept_name}}</td></ng-container><ng-container matColumnDef="Edit">
    <th mat-header-cell *matHeaderCellDef> Edit</th>
    <td mat-cell *matCellDef="let element"><button mat-icon-button><mat-icon color="primary">border_color</mat-icon></button> </td></ng-container><ng-container matColumnDef="expandedDetail"><td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay"><div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"><!--expanded content goes       here --></div></td></ng-container><tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr><tr mat-row *matRowDef="let element; columns: columnsToDisplay;"class="example-element-row" [class.example-expanded-row]="expandedElement === element"(click)="expandedElement = expandedElement === element ? null : element"></tr><tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr></table>

viewuser.component.ts

columnsToDisplay: string[] = ['Name','Designation','Department','Edit'];

这是角度材料参考.. https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html

4

0 回答 0