Angular表格生成对应行数但未显示数据求助

问题描述 #

开发时间日志应用时遇到Angular表格数据显示异常：控制台确认存在2条日志数据，表格也生成了对应行数，但单元格内无任何内容。

相关代码 #

dashboard.component.html #

<div *ngIf="user">
  <h4 style="margin-top: 2%">Past workhours</h4>
  <form (submit)="getLogs(user.username, startDate, endDate)">
    <table class="table table-hover">
      <thead>
        <label>Search workhours between</label>
        <tr>
        <td>
          <label for="inputStartDate">From:</label>
          <input 
            type="Date" 
            class="form-control" 
            id="inputStartDate" 
            name="startDate"
            [(ngModel)]="startDate"
            >
          </td>
        <td>
          <label for="inputEndDate">To:</label>
          <input 
            type="Date" 
            class="form-control" 
            id="inputEndDate" 
            name="endDate"
            [(ngModel)]="endDate"
          >
        </td>
        <td>
          <button type="submit" class="btn btn-primary">Search</button>
        </td>
        </tr>
        <tr>
          <th scope="col">Date</th>
          <th scope="col">Hours</th>
          <th scope="col">Minutes</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let arr of log" >
          <td>{{log.date}}</td>
          <td>{{log.hours}}</td>
          <td>{{log.minutes}}</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

dashboard.component.ts（仅保留相关代码） #

export class DashboardComponent implements OnInit {
  user: Object;
  log: any;

  username: String;
  date: Date;
  hours: number;
  minutes: number;

  constructor(
    private validateService: ValidateService,
    private flashMessage: FlashMessagesService,
    private authService: AuthService,
  ) { }

  ngOnInit() {
    // 默认日期：当前周的周一到周日
    const today = new Date();
    const first = today.getDate() - today.getDay() + 1;
    const last = first + 6;

    const defaultEndDate = new Date(today.setDate(last)).toISOString().split("T")[0];
    const defaultStartDate = new Date(today.setDate(first)).toISOString().split("T")[0];

    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
      this.getLogs(profile.user.username, defaultStartDate, defaultEndDate);
    },
    err => {
      console.log(err);
      return false;
    });
  }

  getLogs(username, startDate, endDate) {
    this.authService.getLog(username).subscribe(workhour => {
      this.log = [];
      var j = 0;
      for (var i = 0; i < workhour.length; i++) {
        const tempDate = workhour[i].date.split("T")[0];
          if (tempDate >= startDate && tempDate <= endDate) {
            var tempHour;
            var tempMinutes;
            
            if (workhour[i].hours % 60 === 0) {
              tempHour = workhour[i].hours/60;
            tempMinutes = 0;
          } else {
            tempHour = (workhour[i].hours - workhour[i].hours % 60)/60;
            tempMinutes = workhour[i].hours % 60;
          }
          
          this.log[j] = {date: tempDate, hours: tempHour, minutes: tempMinutes};
          console.log(this.log[j]);
          j++;
        }
      };
      this.log.sort().reverse();
      console.log(this.log);
      if (this.log.length === 0) this.flashMessage.show('No entries found for the set range', {cssClass: 'alert-danger', timeout: 3000}); 
    },
    err => {
      console.log(err);
      return false;
    });
  }
}

问题原因与修复 #

1. 模板变量引用错误 #

这是单元格无内容的核心原因：在*ngFor="let arr of log"循环中，错误引用了数组log本身，而非循环的当前对象arr。

修复后的模板代码：

<tbody>
  <tr *ngFor="let entry of log" >
    <td>{{entry.date}}</td>
    <td>{{entry.hours}}</td>
    <td>{{entry.minutes}}</td>
  </tr>
</tbody>

（注：将变量名arr改为entry更具语义化，也可保留arr但必须用它访问属性）

2. 数组排序逻辑问题 #

直接对对象数组调用sort()会使用默认排序逻辑，无法正确处理对象，导致排序结果不符合预期。需指定排序依据，比如按日期降序：

修复后的排序代码：

// 按日期降序排序
this.log.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
// 无需再调用reverse()

额外优化建议 #

• 避免模板内联样式，改用CSS类控制间距
• 循环变量命名尽量语义化，提升代码可读性
• 数组构建用push方法代替手动维护索引j，代码更简洁：

  this.log.push({date: tempDate, hours: tempHour, minutes: tempMinutes});
  

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