Требуется помощь по таблице угловых данных с вложенными данными.
Я хочу сортировать данные в таблице.
Я использую таблицу данных - https://www.npmjs.com/package/angular2-datatable
Таблица данных отлично работает для данных типа одиночного массива. (используется для многих угловых применений)
ISSUE: у меня есть вложенный json (на самом деле у меня сложный json, делающий здесь простое)
Спасибо, что посмотрели на это.
Любые предложения или помощь приветствуются.
JSON
records = [
[
{
"name": "Subject Name",
"type": "text",
"id": "subjectName",
"value": "DavidJ",
"firstName": "David",
"lastName": "John"
},
{
"name": "QC Name",
"type": "hidden",
"id": "qcName",
"value": "JosephT",
"firstName": "Joseph",
"lastName": "Tom"
}
],
[
{
"name": "Subject Name",
"type": "text",
"id": "subjectName",
"value": "TigerC",
"firstName": "Tiger",
"lastName": "Chan"
},
{
"name": "QC Name",
"type": "hidden",
"id": "qcName",
"value": "ThomasR",
"firstName": "Thomas",
"lastName": "Richard"
}
]
]
HTML
<table class="table table-responsive table-hover" [mfData]="this.records | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th>#</th>
<th>
<mfDefaultSorter by="subjectName">subject Name</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="qcPerson">QC Person</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody *ngIf="!isLoading">
<tr class="border" *ngFor="let sample of mf.data; let i='index'">
<td>{{i + 1}}</td>
<ng-container *ngFor="let item of sample">
<td *ngIf="item.id ==='subjectName'">
{{item.firstName}} {{item.lastName}}
</td>
<td *ngIf="item.id ==='qcPerson'">
{{item.firstName}} {{item.lastName}}
</td>
</ng-container>
</tr>
</tbody>
</table>
Файл TYpescript
import { Component, OnInit } from '@angular/core';
import { OrderBy } from '../all_services/OrderByPipe';
@Component({
selector: 'app-userdashboard',
templateUrl: './userdashboard.component.html',
styleUrls: ['../header-footer/css/external.style.css']
})
export class UserdashboardComponent implements OnInit {
constructor() {}
ngOnInit() {}
/** Sorting functions */
public data;
public filterQuery = "";
public rowsOnPage = 10;
public sortBy = "subjectName";
public sortOrder = "asc";
public toInt(num: string) {
return +num;
}
}
Datafilterpipe.ts
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {
transform(array: any[], query: string): any {
if (query) {
return _.filter(array, row=>row.name.indexOf(query) > -1);
}
return array;
}
}