Angular中解决Data.slice报错及字符串转日期问题

1. 先修复 Data.slice is not a function 错误 #

这个错误的核心原因是MatTableDataSource构造函数必须接收数组类型数据。如果后端返回的times不是数组（比如是单个对象、null或格式异常），就会触发该错误。

解决方式：
先校验times的类型，确保是数组再继续处理，兜底空数组避免报错：

if (!Array.isArray(times)) {
  this.todosTimes = [];
  this.dataSource = new MatTableDataSource<Time>([]);
  return;
}

2. 批量转换时间字段（表格渲染前完成处理） #

需要遍历返回的times数组，逐个处理每个对象的tempoLimite（毫秒数字符串）和tempoFinal（时间戳字符串），转成用户可读的日期格式后再赋值给数据源。

完整代码实现 #

intializeResultado(): void {
  this.timeService.findAll().subscribe(times => {
    // 校验数据类型，避免slice错误
    if (!Array.isArray(times)) {
      this.todosTimes = [];
      this.dataSource = new MatTableDataSource<Time>([]);
      return;
    }

    // 遍历处理每个时间字段
    this.todosTimes = times.map(time => {
      // 处理tempoLimite：毫秒字符串转可读日期
      const tempoLimiteMs = parseInt(time.tempoLimite, 10);
      const tempoLimiteDate = isNaN(tempoLimiteMs) ? '无效时间' : new Date(tempoLimiteMs).toLocaleString();

      // 处理tempoFinal：时间戳字符串转可读日期
      // 注意：若后端返回的是秒级时间戳需乘1000，毫秒级则直接使用
      const tempoFinalTs = parseInt(time.tempoFinal, 10);
      const tempoFinalDate = isNaN(tempoFinalTs) ? '无效时间' : new Date(tempoFinalTs * 1000).toLocaleString();

      // 返回保留原字段+转换后时间的新对象
      return {
        ...time,
        tempoLimite: tempoLimiteDate,
        tempoFinal: tempoFinalDate
      };
    });

    // 初始化表格数据源
    this.dataSource = new MatTableDataSource<Time>(this.todosTimes);
    this.dataSource.paginator = this.paginator;
  });
}

关键细节说明 #

• 使用map遍历数组，生成新的处理后数组，不修改原数据。
• parseInt第二个参数固定传10（十进制），避免进制解析错误。
• isNaN判断转换是否成功，防止无效字符串转成NaN导致日期显示为Invalid Date。
• toLocaleString()会根据用户本地环境生成可读日期格式，也可以自定义格式（比如yyyy-MM-dd HH:mm:ss），若需自定义可手动拼接日期字段或使用Angular的DatePipe。

3. 额外优化：替换any类型为接口定义 #

建议给timeInformacao定义明确的接口类型，避免后续类型错误：

interface TimeInformacao {
  score: number;
  tempoLimite: string | Date;
  tempoFinal: string | Date;
  tempoLimiteDesafio: string;
  nomeDaEquipe: string;
}

timeInformacao: TimeInformacao = {
  score: 0,
  tempoLimite: "",
  tempoFinal: "",
  tempoLimiteDesafio: "",
  nomeDaEquipe: ""
};

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