Angular中如何将空数据显示为‘N/A’而非‘undefined’

有两种简洁的方法可以实现需求，根据你的代码场景选择即可：

方法一：构建表格数据时提前处理（推荐） #

先写一个可复用的工具函数专门处理空值转换，然后在组装rows数组时，把每个字段都用这个函数处理：

// 工具函数：将undefined、null、空字符串转换为N/A
const formatTableCellValue = (value) => {
  return value === undefined || value === null || value === '' ? 'N/A' : value;
};

var col = ["Test Name", "Result", "Unit" , "Reference"];
const rows = [];
this.xyz.forEach((a) => {
  // 原代码中medicineInfo变量未使用，可根据实际需求保留或删除
  // medicineInfo = this.xyz.find(x => x.id == a.id);
  
  // 替换成你实际的属性名，原代码中的a.xyz为占位符
  rows.push([
    `${formatTableCellValue(a.testName)} ${formatTableCellValue(a.testAlias)}`,
    formatTableCellValue(a.result),
    formatTableCellValue(a.unit),
    formatTableCellValue(a.normalRange) // 使用你提到的normalRange作为参考值
  ]);
});

这种方式在数据源头就完成处理，避免后续渲染时做额外判断，逻辑更清晰。

方法二：利用autoTable的回调统一处理 #

如果不想修改数据构建的代码，可以借助autoTable的didParseCell回调，在表格解析单元格时统一替换空值：

doc.autoTable({
  columnStyles: {
    0: { cellWidth: 45 },
    1: { cellWidth: 45 },
    2: { cellWidth: 45 },
    3: { cellWidth: 45 }
  },
  head: [col],
  body: rows,
  startY: 100,
  theme: 'plain',
  tableLineColor: [242, 238, 238],
  tableLineWidth: 0.5,
  styles: {
    font: 'courier',
    lineColor: [242, 238, 238],
    lineWidth: 0.5
  },
  // 添加回调处理空值
  didParseCell: function(cell) {
    if (cell.raw === undefined || cell.raw === null || cell.raw === '') {
      cell.text = 'N/A';
    }
  }
});

这个方法会遍历每个单元格，检查原始值是否为空并自动替换，适合已有现成rows数组的场景。

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