Question

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

问题：-

单击“编辑”按钮时，应单击该按钮，并且不应扩展该行。
在没有编辑按钮的情况下单击行的另一部分，则仅将扩展行。

这是我的代码：

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

动作按钮在Angular Material Expandable表行上不起作用

0 个答案: