javascript - AG-Grid med en anpassad färgfilter

I min app använder jag AG-Grid. I en av kolumnerna vill jag använda ett anpassat färgrör som jag har skapat. Jag använder cellRenderer för att uppnå det, men jag får felet nedan. Min kod är nedan, vad gör jag fel och vad ska jag fixa?

Rör :

@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>`
    },

Svar #1

Du behöver skicka en Angular-komponent till cellRenderer-egenskapen. I den komponenten kan du sedan använda din pipe i dess template. Så koden du har i cellRendererParams skulle flyttas till en komponent på detta sätt.

@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;
  }
}

Och sedan skulle du i din colDef ha:

    {
      columnGroupShow: 'open', headerName: 'Durum', field: 'TicketStateType.Name', cellRenderer: TicketCellRenderer
    },

Jag har satt upp ett fungerande exempel här för dig att bygga vidare på.

Relaterade artiklar