以下是一个使用subscribe的Angular Datatable的解决方法的示例代码:
npm install angular-datatables --save
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { DataTablesModule } from 'angular-datatables';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {
dtOptions: DataTables.Settings = {};
dtTrigger: Subject = new Subject();
// 数据数组
data: any[];
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
processing: true
};
// 获取数据
this.http.get('your-api-url').subscribe((data: any[]) => {
this.data = data;
// 触发表格更新
this.dtTrigger.next();
});
}
}
列1
列2
列3
{{ item.column1 }}
{{ item.column2 }}
{{ item.column3 }}
这样,你就可以在Angular应用中使用Angular Datatable插件,并使用subscribe来获取数据并更新表格。