Угловое отображение данных в таблице из json
Я, наверное, работаю над аддоном для плагина Minecraft.
Теперь я заканчивал написание сервисов, но понятия не имел, как отобразить эту кучу данных в таблице, отсортированной по интерфейсу, который я для нее писал.
Исходный код моего проекта: https://github.com/LarsE343/AdvancedBan-Webinterface
{
"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"
}
]
}Я хочу отсортировать это как в таблице:
<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>Эй, данные на данный момент не отображаются ни в одной таблице, потому что я не могу взять данные и поместить их с помощью * ngfor, и поэтому я прошу поддержки / идеи, как это сделать, и сортировки вещей, которые у вас нет в данный момент не поможет мне. Я новичок в angular, и у меня нет плана, как сортировать вещи.
Ответы 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();
}
}ты я попробую с этим: D
Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если ссылка на страницу изменится. - Из обзора
@KobyDouek, вы правы, но ngx-datatable - это большая тема, и она зависит от пользователя, какое решение / части ему действительно нужны.
теперь, пожалуйста, напишите руководство, как установить это дерьмо, потому что я не могу импортировать пакет npm по умолчанию, я просто получаю сообщение, что пакет не найден
Что не сработало? Вы установили ngx-datatable через npm? Команда: npm install @swimlane/ngx-datatable --save
он не работает на angular5, просто получает огромные трассировки стека ни за что, кроме данных, у вас есть идея получше? Я пробовал это с l-lin.github.io/angular-datatables/#/getting-started, но теперь я получаю сообщение об ошибке: InvalidPipeArgument: '[object Object]' для канала 'AsyncPipe' в планшете, который я использую * ngFor = "let наказания _postsArray | async
hii lars Асинхронный канал подписывается на Observable или Promise и возвращает последнее значение, которое он испустил. Является ли postsArray массивом наблюдаемых? Поскольку вы используете асинхронный канал
Привет, Ларс, у массивов есть метод sort (). Вы можете написать свои собственные компараторы и использовать их внутри sort (). В вашем случае, поскольку вы используете уникальный идентификатор в качестве первого критерия сортировки, было бы достаточно реализовать только один компаратор.