1. 将"dataTables.bootstrap.min.css"文件添加到样式表中。

2. 在模块中导入DataTable模块。

import { DataTablesModule } from 'angular-datatables';

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

3. 使用angular-datatables指令来创建表格, 特别注意ngAfterViewInit周期。

import { Component, OnInit,ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Subject } from 'rxjs';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { dtOptions: DataTables.Settings = {}; @ViewChild(DataTableDirective, {static: false}) datatableElement: DataTableDirective;

dtTrigger: Subject = new Subject();

constructor(private http: HttpClient) { }

ngOnInit(): void { throw new Error("Method not implemented."); }

ngAfterViewInit(): void { this.dtTrigger.next(); }

ngOnDestroy(): void { this.dtTrigger.unsubscribe(); }

}

export interface UserData { id: string; first_name: string; last_name: string; email: string; gender: string; }