Я работаю над проектом angular, в котором я пытаюсь использовать данные из таблиц данных. net для заполнения данных, извлеченных из AWS через шлюз API. Если я использую обычную таблицу, данные отображаются просто отлично. Когда я инициализирую таблицу данных, данные все еще заполняются, но таблица ведет себя так, как будто данных нет. Внизу есть сообщение о том, что в таблице нет данных. Когда я сортирую столбец или ищу данные, данные исчезают. Я подозреваю, что я не жду достаточно долго, чтобы инициализировать таблицу, или, возможно, мне следует потянуть ее по-другому. Буду очень признателен за любую помощь, которую кто-либо может оказать !!!
Вот мой машинописный код:
export class WasteComponent implements OnInit, AfterViewInit, AfterViewChecked {
public tableData1: TableData;
public dataTable: DataTable;
enabled: number;
wastename: string;
ohdept: string;
cadept: string;
trgroup: string;
bgroup: string;
unid: string;
psn: string;
hazclass: string;
pg: string;
moe: string;
ohio: number;
trail: number;
checkBoxValue(value){
if (value == 1) {
return true;
} else {
return false;
}
}
constructor(public dialog: MatDialog) {}
ngOnInit() {
var data = [];
var JSONService = "api gateway url";
$.ajax({
type: "GET",
url: JSONService,
dataType: "json",
success: function (response) {
//alert(JSON.stringify(response));
for (var r = 0; r < response.Items.length; r++){
data.push([]);
}
for (var i = 0, len = response.Items.length; i < len; ++i) {
var row = i+1;
var enabled = response.Items[i].Enabled.N;
var wastename = response.Items[i].WasteName.S;
var ohdept = response.Items[i].OHDept.S;
var cadept = response.Items[i].CADept.S;
var trgroup = response.Items[i].TRGroup.S;
var bgroup = response.Items[i].BGroup.S;
var unid = response.Items[i].UNID.S;
var psn = response.Items[i].PSN.S;
var hazclass = response.Items[i].HazClass.S;
var pg = response.Items[i].PG.S;
var moe = response.Items[i].MOE.S;
var ohio = response.Items[i].Ohio.N;
var trail = response.Items[i].Trail.N;
var uid = response.Items[i].UID.S;
data[i].push(row, !!enabled, wastename, ohdept, cadept, trgroup, bgroup, unid, psn, hazclass, pg, moe, ohio, trail, uid);
}
//alert(JSON.stringify(data));
}
})
this.tableData1 = {
headerRow: ['', 'Enabled', 'Waste', 'OH Dept', 'CA Dept', 'TR Group', 'BGB Group', 'UNID', 'PSN', 'Haz Class', 'PG', 'MOE', 'Ohio', 'Trail', 'Edit'],
dataRows: data
}
this.dataTable = {
headerRow: ['', 'Enabled', 'Waste', 'OH Dept', 'CA Dept', 'TR Group', 'BGB Group', 'UNID', 'PSN', 'Haz Class', 'PG', 'MOE', 'Ohio', 'Trail', 'Edit'],
dataRows: data
};
}
ngAfterViewInit() {
$('#datatables').DataTable({
"deferRender": true,
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
$('.card .material-datatables label').addClass('form-group');
}
ngAfterViewChecked() {
}
createDialog(): void {
const dialogRef = this.dialog.open(DialogCreateWaste, {
width: '500px',
data: {enabled:1}
});
}
updateDialog(uid, enabled, wastename, ohdept, cadept, trgroup, bgroup, unid, psn, hazclass, pg, moe, ohio, trail): void {
const dialogRef = this.dialog.open(DialogCreateWaste, {
width: '500px',
data: {
enabled: this.checkBoxValue(enabled),
wastename: wastename,
ohdept: ohdept,
cadept: cadept,
trgroup: trgroup,
bgroup: bgroup,
unid: unid,
psn: psn,
hazclass: hazclass,
pg: pg,
moe: moe,
ohio: this.checkBoxValue(ohio),
trail: this.checkBoxValue(trail),
uid: uid
}
});
}
}
Вот html
<div class="col-md-12">
<div class="card-body">
<div class="toolbar">
<!-- Here you can write extra buttons/actions for the toolbar -->
</div>
<div class="material-datatables">
<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th class="disabled-sorting text-right">{{ dataTable.headerRow[0] }}</th>
<th class="disabled-sorting text-right">{{ dataTable.headerRow[1] }}</th>
<th>{{ dataTable.headerRow[2] }}</th>
<th>{{ dataTable.headerRow[3] }}</th>
<th>{{ dataTable.headerRow[4] }}</th>
<th>{{ dataTable.headerRow[5] }}</th>
<th>{{ dataTable.headerRow[6] }}</th>
<th>{{ dataTable.headerRow[7] }}</th>
<th>{{ dataTable.headerRow[8] }}</th>
<th>{{ dataTable.headerRow[9] }}</th>
<th>{{ dataTable.headerRow[10] }}</th>
<th>{{ dataTable.headerRow[11] }}</th>
<th>{{ dataTable.headerRow[12] }}</th>
<th>{{ dataTable.headerRow[13] }}</th>
<th>{{ dataTable.headerRow[14] }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of dataTable.dataRows">
<td>{{row[0]}}</td>
<td>{{row[1]}}</td>
<td>{{row[2]}}</td>
<td>{{row[3]}}</td>
<td>{{row[4]}}</td>
<td>{{row[5]}}</td>
<td>{{row[6]}}</td>
<td>{{row[7]}}</td>
<td>{{row[8]}}</td>
<td>{{row[9]}}</td>
<td>{{row[10]}}</td>
<td>{{row[11]}}</td>
<td *ngIf="row[12] == 1"><i class="fa fa-check-circle" aria-hidden="true"></i></td>
<td *ngIf="row[12] == 0"><i class="fa fa-ban" aria-hidden="true"></i></td>
<td *ngIf="row[13] == 1"><i class="fa fa-check-circle" aria-hidden="true"></i></td>
<td *ngIf="row[13] == 0"><i class="fa fa-ban" aria-hidden="true"></i></td>
<td class="td-actions text-left">
<button mat-raised-button type="button" class="btn btn-success {{row[14]}}" (click)="updateDialog(row[14],row[1],row[2],row[3],row[4],row[5],row[6],row[7],row[8],row[9],row[10],row[11],row[12],row[13])">
<i class="material-icons">edit</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
