数据表加载数据，但按钮和排序在 Angular 4 中无法按预期运行

Question

我有一个 Angular 4 项目，我正在尝试使用 DataTables 库以表格格式显示我的数据。我能够使用他们网站中的硬编码数据。我有所有的按钮(复制，打印，excel(工作正常。但是，当我尝试显示我使用服务从SQL数据库中获取的数据时，我能够在表中显示数据，但没有任何按钮起作用。我什至在表格中有No data available in table文本。

我的网页代码：

<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Zip Code</th>
<th>Submited Date/Time</th>
<th>Submisson Status</th>
<th>Extra</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of participants">
<td>{{ p.firstName }} {{ p.middleName }} {{ p.lastName }}</td>
<td>{{ p.age }}</td>
<td>{{ p.zip }}</td>
<td>{{ p.crreatedDateTime | date:'short' }}</td>
<td>{{ p.projectStatus }}</td>
<td>Ask</td>
</tr>
</tbody>

我的组件是：

import { ParticipantService } from './../../_services/participant.service';
import { Component, OnInit } from '@angular/core';
declare const $;
@Component({
selector: 'app-participant-list-demo',
templateUrl: './participant-list-demo.component.html',
styleUrls: ['./participant-list-demo.component.css']
})
export class ParticipantListDemoComponent implements OnInit {
participants: any[];
constructor(
private participantService: ParticipantService
) { }
ngOnInit() {
this.loadStyles();
this.loadParticipants();
}
loadParticipants() {
this.participantService.getAll().subscribe(participants => {
this.participants = participants;
});
}
loadStyles() {
$(function () {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
});
}
}

我尝试先使用'zone加载参与者，但它也不起作用。如何将动态数据插入数据表，以便可以使用其按钮？

Answer 1

我发现数据表的样式和参与者的实际列表都在ngOnInit方法中。这意味着它们同时加载。暂时，我可以使用setTimeOut()函数来确保参与者首先加载，然后数据表的样式接下来是大约 300 毫秒的时间段。但同样，这不是一个完美的解决方案。我仍在寻找更好的方法。