Question

当我想使用ngFor在数据表中显示数据时，屏幕上方出现错误：

 This code for Angular html component. I try to insert data into the datatables from typescript. Currently i get the data trough api and i want to insert the data into the datatable by using ngFor but it not working as in image attach.

  <tbody>
     <tr *ngFor="let company of companies">
       <td></td>
       <td>System Architect</td>
       <td>Edinburgh</td>
       <td>61</td>
       <td>2011/04/25</td>
       <td>$320,800</td>
       <td>Malaysia</td>
    </tr>
 <tbody>

datatables.component.ts文件：

companies: Company[];
constructor(private companyService: CompanyService) {
this.companyService.getCompanies()
   .subscribe(
    (company: Company[]) => this.companies = company,
    err => console.error(err),
    () => console.log('done get company')
  );
}

Answer 1

经过一段时间的搜索，我发现了一些可以帮助您解决角度问题的步骤。

首先，您需要绑定数据。

function filter_function(){
      global $earth_radius;
      global $delta_lat;
      global $delta_lon;
.....

第二，在.component.ts文件中，您需要做一些复杂的事情。

您已经正确完成了companyService.getCompanies，但是要使用datatables.net，必须调用dataTable（）。但是在使用之前，您需要等待数据到达。

一种方法是使用角铁芯的changeDetector。它可以用于在数据表稳定之前触发对更改的检测。

示例：

<table id="datatables">
    <thead>
        (...)
    </thead>
    <tfoot>
        (...)
    </tfoot>
    <tbody>
        <tr *ngFor="let company of companies">
            <td>company.id</td>
            <td>company.systemArchitect</td>
            <td>company.place</td>
            <td>company.number</td>
            <td>company.date</td>
            <td>company.value</td>
            <td>company.country</td>
        </tr>
    <tbody>
</table>

ref：https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

Answer 2

您可以尝试按{{company.object}}

绑定这些数据

Angular 5 ng不适用于datatables.net

2 个答案: