如何在Ionic表格中展示Firebase存储日期与当前日期的所有天数差

1. 调整组件逻辑：用数组存储所有天数差 #

你当前的问题是this.dates是单个变量，每次循环都会被新值覆盖，所以最终只保留最后一个结果。需要把它改成数组来存储所有计算出的天数差：

首先在组件类中初始化数组：

// 组件类内定义
dates: number[] = [];

然后修改Firebase订阅的代码，将每个天数差加入数组（同时优化日期计算逻辑，避免不必要的字符串转换）：

this.firebaseSrvc.function().subscribe((data) => {
  // 每次获取新数据前清空数组，避免重复渲染旧数据
  this.dates = [];
  
  data.forEach(e => {
    const paymentDate = new Date(e.dataPagamento);
    const currentDate = new Date();
    
    // 计算时间差（毫秒）并转换为天数，向上取整
    const timeDiff = Math.abs(currentDate.valueOf() - paymentDate.valueOf());
    const dayDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    
    // 将结果加入数组，而非覆盖
    this.dates.push(dayDiff);
  });
});

2. 修改Ionic模板：用*ngFor渲染所有结果 #

现在数组里有了所有天数差，需要用Angular的*ngFor指令遍历数组，渲染每一条数据。根据你的需求选择以下两种方式之一：

方式1：每个天数差占一行 #

<ion-grid>
  <!-- 遍历dates数组，为每个元素生成一行 -->
  <ion-row *ngFor="let diff of dates">
    <ion-col id="b">{{ diff }}</ion-col>
  </ion-row>
</ion-grid>

方式2：所有天数差在同一行的多列中显示 #

<ion-grid>
  <ion-row>
    <!-- 遍历dates数组，为每个元素生成一列 -->
    <ion-col id="b" *ngFor="let diff of dates">{{ diff }}</ion-col>
  </ion-row>
</ion-grid>

注意事项 #

• 确保e.dataPagamento的格式能被Date构造函数正确解析（比如ISO格式YYYY-MM-DD），如果出现Invalid Date错误，需要先检查Firebase中存储的日期格式是否规范。

内容的提问来源于stack exchange，提问作者Zé-da-Véstia Lidia