bouton d'action ne fonctionne pas sur la ligne de table Matériau angulaire extensible

voix
0

Ici, je suis en train de travailler sur un bouton d'action (Edit) en matière angulaire tableau extensible chaque row.when i cliquez sur le bouton modifier cela fonctionne pas, mais la ligne est devenue étendue.

PROBLÈME:-

1.Les cliquez sur le bouton Modifier doit être un travail sur clic et la ligne ne devrait pas être élargi. 2.Lorsque cliquez sur autre partie de la ligne sans bouton Modifier alors que la ligne sera étendue.

Aidez-moi, s'il vous plaît !

Voici mon code

==> ## 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', 'Désignation', 'Département', 'Edit'];

Voici un matériau angulaire referance .. https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html

Créé 24/10/2019 à 12:52
source utilisateur
Dans d'autres langues...                            

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