Estoy implementando mat-table .
Donde quiero cambiar el mat-icon de un botón basado en el click event solo para una sola fila en la tabla. Puedo cambiar el ícono pero no puedo hacerlo solo para una fila.
¿Alguna sugerencia sobre cómo puedo arreglar eso?
Mi ejemplo de stackblitz: cambio de icono de botón
Debe tener una propiedad que maneje el valor de la fila individual. He agregado propiedades en el objeto de matriz y la configuración que se expande y contrae.
Aquí está el código de trabajo: https://stackblitz.com/edit/angular-ugxyhc-cbbtmz?file=src%2Fapp%2Ftable-column-styling-example.html
Aquí hay un violín funcional de esto: https://stackblitz.com/edit/angular-ugxyhc-ri2neq?file=src%2Fapp%2Ftable-column-styling-example.ts
Todo lo que tienes que hacer es expandir el objeto llamado PeriodicElement para que también contenga si está expandido o no. Una vez que haga eso, puede preguntar si un determinado elemento en una determinada fila se expande y se procesa en consecuencia.
export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; isExpanded?: boolean; // Keep track of expanded state } expand(element: PeriodicElement, expanded: boolean) { element.isExpanded = !element.isExpanded; }Y el HTML:
<td mat-cell *matCellDef="let element"> <button (click)="expand(element, isExpanded)"> <mat-icon *ngIf="!element.isExpanded">expand_more</mat-icon> <mat-icon *ngIf="element.isExpanded">chevron_right</mat-icon> </button> </td>