0
91
VistasAG-Grid con un tubo de color personalizado
En mi aplicación, estoy usando AG-Grid. En una de las columnas, quiero usar un tubo de color personalizado que he creado. Estoy usando cellRenderer para lograrlo, pero aparece el siguiente error. Mi código está debajo, ¿qué estoy haciendo mal y qué debo corregir?
Tubo:
@Pipe({ name: 'ticketStateColor' }) export class TicketStateTypePipe implements PipeTransform { transform(state: any): string { if (state == 1) return 'accent'; if (state == 2) return 'orange-800'; if (state == 3) return 'green'; if (state == 4) return 'orange'; if (state == 5) return 'red'; if (state == 6) return 'teal'; if (state == 7) return 'accent'; return ''; } }TS:
{ columnGroupShow: 'open', headerName: 'Durum', field: 'TicketStateType.Name', cellRenderer: TicketStateTypePipe, cellRendererParams: `<td mat-cell *matCellDef="let row"> <div fxLayout="column" fxLayoutAlign="center start"> <div [ngClass]="params.data.TicketStateType?.Name | ticketStateColor" class="text-boxed mb-2"> {{params.data?.TicketStateType?.Id}}</div> </div> </td>` },
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Debe pasar un componente Angular a la propiedad cellRenderer. En ese componente, puede usar su tubería en su plantilla. Entonces, el código que tiene en cellRendererParams se movería a un componente como este.
@Component({ selector: 'pipe-component', template: ` <div>{{ params.value | ticketStateColor }}</div> `, }) export class TicketCellRenderer implements ICellRendererAngularComp { public params; agInit(params: ICellRendererParams): void { this.params = params; } refresh(params: ICellRendererParams) { return false; } }Y luego en tu colDef tendrías:
{ columnGroupShow: 'open', headerName: 'Durum', field: 'TicketStateType.Name', cellRenderer: TicketCellRenderer },He configurado un ejemplo de trabajo aquí para que lo amplíes.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta