Angular中使用日期函数将日期加7天后在HTML中显示的实现方案

前置处理：提取纯日期字符串 #

首先你从API拿到的日期带<strong>标签，需要先过滤掉HTML标签提取纯日期文本：

// 过滤HTML标签，得到纯日期字符串：31-08-2021 13:58
const getPureDateStr = (rawStr: string) => rawStr.replace(/<[^>]+>/g, '');

核心逻辑（TS层） #

因为原始日期格式是DD-MM-YYYY HH:mm，原生JS Date不直接支持该格式的解析，所以需要手动拆分处理，避免解析错误：

// 1. 自定义解析日期为Date对象
parseCustomDate(dateStr: string): Date {
  const [datePart, timePart] = getPureDateStr(dateStr).split(' ');
  const [day, month, year] = datePart.split('-').map(Number);
  const [hour, minute] = timePart.split(':').map(Number);
  // JS月份从0开始计数，所以月份要减1
  return new Date(year, month - 1, day, hour, minute);
}

// 2. 日期加7天并格式化为目标格式
add7DaysFormat(date: Date): string {
  const targetDate = new Date(date);
  targetDate.setDate(targetDate.getDate() + 7);
  // 补前导零工具方法
  const pad = (n: number) => n.toString().padStart(2, '0');
  return `${pad(targetDate.getDate())}-${pad(targetDate.getMonth() + 1)}-${targetDate.getFullYear()} ${pad(targetDate.getHours())}:${pad(targetDate.getMinutes())}`;
}

// 3. 处理数据源，假设API返回的列表存在apiResult变量中
this.dataSource = apiResult.map(item => {
  // 假设API返回的日期字段为apiDate
  const originalDate = this.parseCustomDate(item.apiDate);
  return {
    ...item,
    // 保留原始带标签的日期用于第一个单元格展示
    rawOriginalDate: item.apiDate,
    after7DaysDate: this.add7DaysFormat(originalDate)
  }
})

如果你的项目引入了dayjs/moment等日期库，处理逻辑可以更简洁，以dayjs为例：

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

// 直接解析+计算+格式化
const after7Days = dayjs(getPureDateStr(rawStr), 'DD-MM-YYYY HH:mm').add(7, 'day').format('DD-MM-YYYY HH:mm');

模板层（HTML）mat-cell 绑定 #

<!-- 第一个mat-cell：展示原始带格式的日期 -->
<ng-container matColumnDef="originalDate">
  <th mat-header-cell *matHeaderCellDef>原始日期</th>
  <td mat-cell *matCellDef="let element" [innerHTML]="element.rawOriginalDate"></td>
</ng-container>

<!-- 第二个mat-cell：展示加7天后的日期 -->
<ng-container matColumnDef="after7Days">
  <th mat-header-cell *matHeaderCellDef>7天后日期</th>
  <td mat-cell *matCellDef="let element">{{element.after7DaysDate}}</td>
</ng-container>

注意：原始日期带<strong>标签需要用[innerHTML]绑定才能生效，直接用插值语法会把标签当成纯文本展示。

内容的提问来源于stack exchange，提问作者FE-Deve