带有自定义颜色管道的 AG-Grid

Question

在我的应用程序中，我使用的是 AG-Grid。在其中一列中，我想使用我创建的自定义颜色管道。我正在使用 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>`
    },

Answer 1

您需要将 Angular 组件传递给 cellRenderer 属性。在该组件中，您可以在其模板中使用您的管道。因此，您在 cellRendererParams 中的代码将移动到这样的组件中。

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

然后在您的 colDef 中您将拥有：

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

我已经设置了一个工作示例 here 供您扩展。

带有自定义颜色管道的 AG-Grid

AG-Grid with a Custom Color Pipe

html

javascript

typescript

ag-grid

angular