Angular中如何将服务返回数据按时间排序并转换为模型展示？

1. 类型转换与数据映射 #

服务返回的数据包含ownername这类多余字段，需要映射到你定义的ResultsModel接口。通过数组map方法过滤出模型所需字段：

// 组件内定义变量存储处理后的数据
results: ResultsModel[] = [];

getAllResults() {
  const apiEndpoint = "results";
  this.httpRequestService.getApi(apiEndpoint, false).subscribe((rawData: any[]) => {
    // 映射为ResultsModel类型，剔除多余字段
    this.results = rawData.map(item => ({
      id: item.id,
      result: item.result,
      createddate: item.createddate,
      clientid: item.clientid,
      clientusername: item.clientusername
    } as ResultsModel));
    
    // 执行时间排序
    this.sortResultsByDate();
  });
}

2. 按时间排序 #

实现排序方法，将字符串格式的时间转为Date对象进行比较，支持升序/降序切换：

sortResultsByDate(isAscending: boolean = true) {
  this.results.sort((a, b) => {
    const dateA = new Date(a.createddate);
    const dateB = new Date(b.createddate);
    
    // 升序用dateA - dateB，降序用dateB - dateA
    return isAscending ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime();
  });
}

3. 表格展示（模板部分） #

在组件HTML模板中用*ngFor渲染表格，可搭配Angular日期管道优化时间显示：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>结果</th>
      <th>客户端ID</th>
      <th>客户端用户名</th>
      <th>创建时间</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of results">
      <td>{{ item.id }}</td>
      <td>{{ item.result }}</td>
      <td>{{ item.clientid }}</td>
      <td>{{ item.clientusername }}</td>
      <td>{{ item.createddate | date:'yyyy-MM-dd HH:mm:ss' }}</td>
    </tr>
  </tbody>
</table>

补充优化 #

• 若需要点击表头切换排序，可给表头绑定点击事件，调用sortResultsByDate时传入相反的排序状态
• 若时间格式存在兼容性问题，可引入date-fns等工具库统一处理日期解析

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