Angular从JSON生成表格及Minecraft插件Addon数据排序展示求助

一、从JSON数据生成Angular表格 #

先从最基础的表格渲染入手，结合你给出的punishments数据结构，直接上可复用的代码示例：

1. 组件类（.ts）处理数据

假设你已经通过服务或本地模拟拿到了JSON数据，先把数据挂载到组件变量上：

import { Component } from '@angular/core';

@Component({
  selector: 'app-punishment-table',
  templateUrl: './punishment-table.component.html',
  styleUrls: ['./punishment-table.component.css']
})
export class PunishmentTableComponent {
  // 模拟你的惩罚数据结构
  punishments = [
    {
      "calculation": null,
      "end": "-1",
      "id": 2,
      "name": "partygirl3",
      "operator": "Nintendonator_xp",
      "punishmentType": "WARNING",
      "reason": "test",
      "start": "1520165103063",
      "uuid": "d2e..."
    },
    {
      "calculation": null,
      "end": "1620165103063",
      "id": 1,
      "name": "player123",
      "operator": "Admin",
      "punishmentType": "MUTE",
      "reason": "spamming",
      "start": "1510165103063",
      "uuid": "a1b..."
    }
  ];
}

2. 模板文件（.html）渲染表格

用Angular的*ngFor遍历数组，把每个字段映射到表格单元格，还能做一些友好的格式化处理：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>玩家名称</th>
      <th>惩罚类型</th>
      <th>原因</th>
      <th>执行者</th>
      <th>开始时间</th>
      <th>结束时间</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let punishment of punishments">
      <td>{{ punishment.id }}</td>
      <td>{{ punishment.name }}</td>
      <td>{{ punishment.punishmentType }}</td>
      <td>{{ punishment.reason }}</td>
      <td>{{ punishment.operator }}</td>
      <!-- 用date管道把时间戳转成可读格式 -->
      <td>{{ punishment.start | date:'yyyy-MM-dd HH:mm:ss' }}</td>
      <!-- 处理永久惩罚的显示逻辑 -->
      <td>{{ punishment.end === '-1' ? '永久' : (punishment.end | date:'yyyy-MM-dd HH:mm:ss') }}</td>
    </tr>
  </tbody>
</table>

二、按自定义规则实现数据排序 #

接下来处理排序需求，你可以根据自己的接口定义（比如按ID、开始时间、惩罚类型排序），编写排序函数，甚至实现表头点击切换排序方向的交互：

1. 基础单字段排序

比如要把惩罚按开始时间倒序（最新的惩罚排在最前面），在组件类里写一个排序方法：

// 按开始时间倒序排序
sortByLatest(): void {
  this.punishments.sort((a, b) => {
    // 把字符串时间戳转成数字比较
    const timeA = parseInt(a.start, 10);
    const timeB = parseInt(b.start, 10);
    return timeB - timeA; // 倒序；正序用timeA - timeB
  });
}

// 按惩罚类型字母排序
sortByType(): void {
  this.punishments.sort((a, b) => {
    return a.punishmentType.localeCompare(b.punishmentType);
  });
}

你可以在组件初始化时调用，或者通过按钮触发这些排序方法。

2. 表头点击动态排序（进阶）

如果要实现点击表头切换排序方向的交互，先维护排序状态，再写通用排序逻辑：

// 组件类新增状态变量
currentSortField: string = 'id'; // 默认按ID排序
sortDirection: 'asc' | 'desc' = 'asc';

// 通用排序方法
handleSort(field: string): void {
  // 如果点击的是当前排序字段，切换方向
  if (this.currentSortField === field) {
    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
  } else {
    this.currentSortField = field;
    this.sortDirection = 'asc';
  }

  this.punishments.sort((a, b) => {
    let valA: any = a[field];
    let valB: any = b[field];

    // 特殊处理时间戳字段
    if (field === 'start' || field === 'end') {
      valA = parseInt(valA, 10);
      valB = parseInt(valB, 10);
    }

    // 字符串用localeCompare，数字直接做差
    const comparison = typeof valA === 'string' 
      ? valA.localeCompare(valB) 
      : valA - valB;

    // 根据排序方向返回结果
    return this.sortDirection === 'asc' ? comparison : -comparison;
  });
}

然后在模板里给表头添加点击事件和排序标识：

<thead>
  <tr>
    <th (click)="handleSort('id')">
      ID {{ currentSortField === 'id' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('name')">
      玩家名称 {{ currentSortField === 'name' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('punishmentType')">
      惩罚类型 {{ currentSortField === 'punishmentType' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('reason')">
      原因 {{ currentSortField === 'reason' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('operator')">
      执行者 {{ currentSortField === 'operator' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('start')">
      开始时间 {{ currentSortField === 'start' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
    <th (click)="handleSort('end')">
      结束时间 {{ currentSortField === 'end' ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
    </th>
  </tr>
</thead>

这样点击表头就能切换对应字段的排序方向，还能通过箭头直观看到当前排序状态。

额外小提示 #

如果你的数据量比较大，建议考虑使用Angular Material的MatTable组件，它自带排序、分页、筛选等成熟功能，能节省不少自定义开发的时间。

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