角度在json中显示表中的数据

Question

我正在使用Minecraft插件的插件。

现在我正在完成编写服务，但我没有任何线索如何在我为其编写的接口之后的表中显示这一组数据。

我的项目的源代码：https://github.com/LarsE343/AdvancedBan-Webinterface

＆＃13;

＆＃13;

{
  "punishments": [
    {
      "calculation": null, 
      "end": "-1", 
      "id": 2, 
      "name": "partygirl3", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "WARNING", 
      "reason": "test", 
      "start": "1520165103063", 
      "uuid": "d2ed075762504663bb67a73155d69269"
    }, 
    {
      "calculation": null, 
      "end": "1520196276893", 
      "id": 4, 
      "name": "partygirl3", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "TEMP_MUTE", 
      "reason": "none", 
      "start": "1520178276926", 
      "uuid": "d2ed075762504663bb67a73155d69269"
    }, 
    {
      "calculation": null, 
      "end": "-1", 
      "id": 5, 
      "name": "tosh94", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "WARNING", 
      "reason": "test", 
      "start": "1520180242009", 
      "uuid": "tosh94"
    }, 
    {
      "calculation": null, 
      "end": "-1", 
      "id": 6, 
      "name": "tosh94", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "WARNING", 
      "reason": "test", 
      "start": "1520180567341", 
      "uuid": "tosh94"
    }, 
    {
      "calculation": null, 
      "end": "-1", 
      "id": 7, 
      "name": "tosh94", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "BAN", 
      "reason": "test", 
      "start": "1520180606379", 
      "uuid": "tosh94"
    }, 
    {
      "calculation": null, 
      "end": "-1", 
      "id": 8, 
      "name": "partygirl3", 
      "operator": "Nintendonator_xp", 
      "punishmentType": "WARNING", 
      "reason": "Bitte \u00fcberdenke dein Verhalten", 
      "start": "1520181381607", 
      "uuid": "d2ed075762504663bb67a73155d69269"
    }
  ]
}

＆＃13;

＆＃13;

＆＃13;

我想在格式化的表格中对其进行排序：

＆＃13;

＆＃13;

<style>
  #customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  #customers tr:nth-child(even){background-color: #f2f2f2;}

  #customers tr:hover {background-color: #ddd;}

  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
  .text-center {
    text-align: center;
  }
</style>
<div class="text-center">
  <h1>Willkommen,</h1>
  <br>
  <p>Du bist also auf der Suche nach einem historischem Verbrechen?</p>
  <br>
  <br>
</div>
<table id="customers">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Grund</th>
    <th>Teammitglied</th>
    <th>Art der Strafe</th>
  </tr>
  <tr *ngFor="let punishments of _postsArray">
    <td>{{punishments.id}}</td>
    <td>{{punishments.name}}</td>
    <td>{{punishments.reason}}</td>
    <td>{{punishments.operator}}</td>
    <td>{{punishments.punishmentType}}</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我建议你使用ngx-datatable。

我会把链接发给你演示。 （它还提供分类等等）

http://swimlane.github.io/ngx-datatable/

[编辑]

使用ngx-datatable进行默认排序的示例：

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

@Component({
  selector: 'default-sorting-demo',
  template: `
    <div>
      <h3>
        Client-side Sorting
        <small>
          <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/sorting/sorting-default.component.ts" target="_blank">
            Source
          </a>
        </small>
      </h3>
      <ngx-datatable
        class="material"
        [rows]="rows"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="50"
        [scrollbarV]="true"
        [sorts]="[{prop: 'name', dir: 'desc'}]">
        <ngx-datatable-column name="Company">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.company}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Name">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.name}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Gender">
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  `
})
export class DefaultSortingComponent implements OnInit {

  rows = [];

  ngOnInit() {
    this.fetch((data) => {
      this.rows = data;
    });
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/company.json`);

    req.onload = () => {
      const data = JSON.parse(req.response);
      cb(data);
    };

    req.send();
  }

}