我试图在Angular项目中使用DataTables,但它只是显示一个基本的表,没有任何功能或选项
我正在使用的软件包
ng add angular-datatables
字符串
的HTML
<section>
<div class="panel p-4">
<h5 class="fw-bold">Destinations</h5>
<table class="table table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let destination of allDestinations">
<td>{{ destination.id }}</td>
<td>{{ destination.name }}</td>
<td>{{ destination.description }}</td>
</tr>
</tbody>
</table>
</div>
</section>
型
TS码
export class DestinationsComponent implements OnInit {
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
allDestinations: any[] = [];
constructor(private _DestinationsService: DestinationsService) {}
ngOnInit(): void {
this.destinations();
}
destinations(): void {
this._DestinationsService.destinations().subscribe((data) => {
this.allDestinations = data;
this.dtTrigger.next();
});
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
型
我已经在组件的父模块中导入了DataTables模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SetupRoutingModule } from './setup-routing.module';
import { DestinationsComponent } from './destinations/destinations.component';
import { DataTablesModule } from 'angular-datatables';
@NgModule({
declarations: [
DestinationsComponent
],
imports: [
CommonModule,
SetupRoutingModule,
DataTablesModule
]
})
export class SetupModule { }
型
这是我得到的输出
的数据
有谁能帮我解决这个问题吗?
1条答案
按热度按时间dgiusagp1#
在你的.ts文件中,你需要有dtOptions。然后你在你的组件中使用。
范例:
dtOptions:any = {};