Angular 5中ngFor在DataTables.net中无法正常工作的问题

我明白你现在遇到的困扰啦——用Angular的*ngFor动态渲染DataTables的表格行，但数据没能正常显示出来。这其实是因为DataTables会在页面加载时就初始化并读取DOM中的表格内容，而你的companies数据是通过API异步获取的，等数据回来的时候，DataTables已经完成初始化了，自然读不到后来生成的表格行。

下面给你两种可行的解决方案：

方案一：在数据加载完成后手动初始化DataTables #

这种方法适合直接使用jQuery版DataTables的场景：

1. 首先修正你的HTML代码，把硬编码的表格内容改成绑定companies的属性（你现在的td都是固定值，要替换成实际数据字段）：

<table id="companyTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>职位</th>
      <th>城市</th>
      <th>年龄</th>
      <th>入职日期</th>
      <th>薪资</th>
      <th>国家</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let company of companies'>
      <td>{{company.id}}</td>
      <td>{{company.position}}</td>
      <td>{{company.city}}</td>
      <td>{{company.age}}</td>
      <td>{{company.joinDate}}</td>
      <td>{{company.salary}}</td>
      <td>{{company.country}}</td>
    </tr>
  </tbody>
</table>

2. 修改datatables.component.ts，在数据成功获取后再初始化DataTables：

import { Component, OnInit } from '@angular/core';
import { CompanyService } from './company.service';
import { Company } from './company.model';
declare var $: any; // 确保已引入jQuery和DataTables的JS文件

@Component({
  selector: 'app-datatables',
  templateUrl: './datatables.component.html',
  styleUrls: ['./datatables.component.css']
})
export class DatatablesComponent implements OnInit {
  companies: Company[];

  constructor(private companyService: CompanyService) { }

  ngOnInit(): void {
    this.companyService.getCompanies()
      .subscribe(
        (company: Company[]) => {
          this.companies = company;
          // 数据加载完成后初始化DataTables，setTimeout确保Angular完成DOM渲染
          setTimeout(() => {
            $('#companyTable').DataTable();
          }, 0);
        },
        err => console.error(err),
        () => console.log('done get company')
      );
  }
}

方案二：使用Angular专属的angular-datatables库（更推荐） #

这种方法更符合Angular的开发习惯，避免直接操作DOM：

1. 先安装依赖：

npm install angular-datatables datatables.net-bs4

2. 在app.module.ts中导入相关模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTablesModule } from 'angular-datatables';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DatatablesComponent } from './datatables/datatables.component';

@NgModule({
  declarations: [
    AppComponent,
    DatatablesComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 修改组件代码，使用dtOptions和dtTrigger：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CompanyService } from './company.service';
import { Company } from './company.model';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-datatables',
  templateUrl: './datatables.component.html',
  styleUrls: ['./datatables.component.css']
})
export class DatatablesComponent implements OnInit, OnDestroy {
  companies: Company[];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();

  constructor(private companyService: CompanyService) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
    };

    this.companyService.getCompanies()
      .subscribe(
        (company: Company[]) => {
          this.companies = company;
          // 触发DataTables初始化
          this.dtTrigger.next(null);
        },
        err => console.error(err)
      );
  }

  ngOnDestroy(): void {
    // 销毁触发器防止内存泄漏
    this.dtTrigger.unsubscribe();
  }
}

4. 对应的HTML代码：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>职位</th>
      <th>城市</th>
      <th>年龄</th>
      <th>入职日期</th>
      <th>薪资</th>
      <th>国家</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let company of companies'>
      <td>{{company.id}}</td>
      <td>{{company.position}}</td>
      <td>{{company.city}}</td>
      <td>{{company.age}}</td>
      <td>{{company.joinDate}}</td>
      <td>{{company.salary}}</td>
      <td>{{company.country}}</td>
    </tr>
  </tbody>
</table>

最后提醒你：确保你的Company接口定义了所有需要绑定的字段（比如id、position等），不然数据绑定会失效哦～

内容的提问来源于stack exchange，提问作者Firdaus