Angular DataTables 未显示任何功能或选项

Question

我正在尝试在 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 { }

这是我得到的输出

有人可以帮我解决这个问题吗？

Answer 1

在您的 .ts 文件中，您需要有 dtOptions。然后你在你的组件中使用。

示例：

dtOptions: 任意 = {};