botão de ação não trabalhando em linha da tabela Angular material expansível

votos
0

Aqui eu estou tentando trabalhar um botão de ação (Edit) em material de tabela expansível angular cada row.when i clique no botão Editar não é trabalho, mas linha é tornar-se expandido.

QUESTÃO:-

1.Quando botão Editar clique deve ser um trabalho em clique e linha não deve ser expandido. 2.when clique em outra parte da linha sem botão Editar só então linha será expandida.

por favor me ajude !

Aqui está o meu código

==> ## 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 [] = [ 'Nome', 'Designação', 'Departamento', 'Editar'];

Aqui está angular referance materiais .. https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html

Publicado 24/10/2019 em 12:52
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more