angular - 从 AWS API Gateway 提取数据时，Datatable.net 表表现异常
问题描述
我正在做一个有角度的项目，我试图使用来自 datatables.net 的数据表来填充我通过 API 网关从 AWS 中提取的数据。如果我使用常规表格，则数据显示得很好。当我初始化数据表时，数据仍会填充，但表的行为就像没有数据一样。底部有一条消息指出，表中没有可用数据。当我对列进行排序或搜索时，数据会消失。我怀疑我没有等待足够长的时间来初始化表格，或者我应该以不同的方式拉动它。任何人都可以提供的任何帮助将不胜感激！！！
这是我的打字稿代码：
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>
解决方案
我最终以不同的方式做到了这一点。数据现在进来了，但我在排序和过滤工作时遇到了问题。
export class WasteComponent implements OnInit, AfterViewInit, AfterViewChecked {
checkBoxValue(value){
if (value == 1) {
return true;
} else {
return false;
}
}
displayedColumns: string[] = ['enabled', 'wastename', 'ohdept', 'cadept', 'trgroup', 'bgroup', 'unid', 'psn', 'hazclass', 'pg', 'moe', 'ohio', 'trail', 'edit'];
dataSource: any;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
constructor(private http: HttpClient, private chRef: ChangeDetectorRef, public dialog: MatDialog, private wasteService: WasteService) {}
ngOnInit() {
this.wasteService.getAllWastes().subscribe(data => {
this.chRef.detectChanges();
this.dataSource = new MatTableDataSource(Object.values(data)[1]);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
console.log(filterValue);
this.dataSource.filter = filterValue.trim().toLowerCase();
}
getWastes() {
}
ngAfterViewInit() {
}
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
}
});
}
}
推荐阅读
- github - NodeId 作为 ModelCompiler OPC UA 中的字符串
- django - 从词汇表 (RDFS) 生成表单字段
- python - python RGB图像到YUYV
- mysql - UTF-8 在 MySQL DB 中存储为问号
- angular - 具有 OR 语句和文档相关身份验证数据的 Angular Firestore 权限
- r - R 使用指数回归方程
- c# - ObservableCollection 绑定没有按预期工作
- dart - 从当前版本升级到最新版本时出现错误
- square-connect - 轮询 Square Device 状态
- javascript - cavsTxt.measureText 根据字体系列和字体大小为文本提供不同的宽度