Javascript 带有自定义 colored颜色 管道的 AGGrid

在我的应用程序中，我使用的是AG网格.在其中一列中，我想使用我创建的自定义 colored颜色 管道.我使用cellRenderer来实现这一点，但我得到以下错误.下面是我的代码，我做错了什么，应该修复什么？

管道:

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