如何将ng2-smart-table的valuePrepareFunction存入后端返回的JSON？

核心问题 #

JSON是纯数据交换格式，无法存储函数、箭头函数这类可执行逻辑，所以后端无法直接返回valuePrepareFunction属性对应的处理方法，必须通过标记配置信息+前端转换的方式实现需求。

解决方案步骤 #

1. 后端调整配置返回结构 #

在Django REST Framework返回的JSON配置中，给需要管道处理的字段添加自定义的管道标记信息，替代直接存储函数。比如针对日期格式化场景，后端返回的配置结构如下：

{
  "columns": {
    "buildQty": {
      "title": "buildQty"
    },
    "created": {
      "title": "created",
      "pipeConfig": {
        "type": "date",
        "format": "dd MMM yyyy"
      }
    },
    "username": {
      "title": "User Name"
    },
    "email": {
      "title": "Email"
    }
  }
}

这里的pipeConfig是自定义字段，用来告知前端该字段的管道类型和参数。

2. 前端接收配置后转换为valuePrepareFunction #

前端拿到后端配置后，遍历所有列，根据pipeConfig生成对应的处理函数，替换标记字段：

import { DatePipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  providers: [DatePipe]
})
export class TableComponent implements OnInit {
  settings: any;

  constructor(
    private http: HttpClient,
    private datePipe: DatePipe
  ) {}

  ngOnInit(): void {
    this.http.get('/api/table-settings').subscribe(backendSettings => {
      // 深拷贝后端配置，避免修改原响应数据
      this.settings = JSON.parse(JSON.stringify(backendSettings));
      
      // 遍历列配置，处理管道逻辑
      Object.keys(this.settings.columns).forEach(colKey => {
        const column = this.settings.columns[colKey];
        if (column.pipeConfig) {
          const { type, format } = column.pipeConfig;
          
          // 根据管道类型生成对应的valuePrepareFunction
          switch (type) {
            case 'date':
              column.valuePrepareFunction = (value: any) => {
                return this.datePipe.transform(new Date(value), format);
              };
              break;
            // 扩展其他管道示例：文本大写转换
            case 'uppercase':
              column.valuePrepareFunction = (value: string) => {
                return value?.toUpperCase() || value;
              };
              break;
            // 自定义管道同理，添加对应case即可
          }
          
          // 移除临时标记字段
          delete column.pipeConfig;
        }
      });
    });
  }
}

扩展说明 #

• 如需支持更多Angular内置管道（如currency、decimal）或自定义管道，只需在pipeConfig中补充对应参数，再在前端的switch分支里添加处理逻辑即可。
• 这种方式既保留了后端配置的灵活性，又遵守了JSON数据传输规范，完美适配ng2-smart-table的行数据处理需求。

内容的提问来源于stack exchange，提问作者Miguel Rosales