Angular 5中如何动态格式化JSON返回的不同类型数据？

刚好之前处理过类似的Angular动态表格格式化需求，给你两个实用方案，既能满足动态类型识别的需求，又符合Angular的开发习惯：

方法1：组件内写格式化函数（快速上手） #

这种方式适合只在当前组件使用的场景，直接在组件类里写一个处理函数，根据字段名或值的类型做针对性格式化：

// 你的组件类代码
import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe] // 注入DatePipe用于日期格式化
})
export class YourComponent {
  searchResult: any[] = [];
  keys: string[] = [];

  constructor(
    private datePipe: DatePipe,
    private sanitizer: DomSanitizer // 用于处理HTML内容的安全转换
  ) {}

  // 核心格式化函数
  formatValue(value: any, key: string): string | SafeHtml {
    // 优先处理空值/Null，统一显示为"-"
    if (value === null || value === undefined) {
      return '-';
    }

    // 根据字段名识别日期类型（比如你的CREATE_DTTM字段）
    if (key === 'CREATE_DTTM') {
      return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss') || '-';
    }

    // 处理数字类型（比如CASE_RK字段），添加千分位格式化
    if (typeof value === 'number') {
      return value.toLocaleString();
    }

    // 扩展：如果是链接类字段，可转成可点击的a标签
    // if (key.includes('URL') && typeof value === 'string' && value.startsWith('http')) {
    //   return this.sanitizer.bypassSecurityTrustHtml(`<a href="${value}" target="_blank">${value}</a>`);
    // }

    // 默认返回原内容
    return value.toString();
  }
}

然后在模板里直接调用这个函数：

<tr *ngFor="let row of searchResult">
  <td *ngFor="let key of keys; let i = index;">
    <!-- 普通文本直接用插值表达式 -->
    {{ formatValue(row[key], key) }}
    
    <!-- 如果需要渲染HTML（比如链接），换成[innerHTML] -->
    <!-- <td [innerHTML]="formatValue(row[key], key)"></td> -->
  </td>
</tr>

方法2：自定义管道（Angular最佳实践，复用性强） #

如果多个组件都需要这种动态格式化逻辑，推荐写一个自定义管道，实现代码复用：

首先生成管道文件：

ng generate pipe dynamic-value

然后修改管道代码：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'dynamicValue'
})
export class DynamicValuePipe implements PipeTransform {
  constructor(
    private datePipe: DatePipe,
    private sanitizer: DomSanitizer
  ) {}

  transform(value: any, key: string): string | SafeHtml {
    if (value === null || value === undefined) {
      return '-';
    }

    // 日期字段格式化
    if (key === 'CREATE_DTTM') {
      return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss') || '-';
    }

    // 数字类型格式化
    if (typeof value === 'number') {
      return value.toLocaleString();
    }

    // 扩展：链接字段转HTML
    // if (key.includes('URL') && typeof value === 'string' && value.startsWith('http')) {
    //   return this.sanitizer.bypassSecurityTrustHtml(`<a href="${value}" target="_blank">${value}</a>`);
    // }

    return value.toString();
  }
}

最后在模板里使用管道：

<tr *ngFor="let row of searchResult">
  <td *ngFor="let key of keys; let i = index;">
    {{ row[key] | dynamicValue:key }}
    <!-- 渲染HTML用[innerHTML] -->
    <!-- <td [innerHTML]="row[key] | dynamicValue:key"></td> -->
  </td>
</tr>

记得在你的模块里声明这个管道，或者放到共享模块中导出，方便全局使用。

额外小技巧：自动识别日期格式 #

如果不想依赖字段名，也可以通过判断字符串是否符合日期格式来自动处理：

// 新增一个日期判断工具函数
private isDateString(value: string): boolean {
  return !isNaN(Date.parse(value));
}

// 在格式化逻辑里使用
if (typeof value === 'string' && this.isDateString(value)) {
  return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss') || '-';
}

内容的提问来源于stack exchange，提问作者Ahmed Bagalaty