在 HTML 表中添加 [dtTrigger] 时，Angular 数据表不会呈现 - Angular 14

Question

当我在 HTML 表中添加

[dtTrigger] = "dtTrigger"

时，数据表不再呈现。我在页面中看不到任何数据表功能。当我从 HTML 中删除

[dtTrigger] = "dtTrigger"

时，数据表已完美呈现，但数据触发功能不可用。我正在使用 Angular 14。

我按照 angular-datatable 文档安装数据表。代码如下。

角度分量如下所述：

@Component({
  selector: 'app-company-list',
  templateUrl: './company-list.component.html',
  styleUrls: ['./company-list.component.css'],
})
export class CompanyListComponent implements OnInit, OnDestroy {

  // some code

  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'simple_numbers',
      pageLength: 25,
      lengthChange: false,
      responsive: true,
    };

    this.getCompanies();

  // some code

  getCompanies(): void {
    this.companyService.getAllCompanies().subscribe({
      next: (companies) => {

        // code for fetching data

        this.dtTrigger.next(null);
      },
      error: (response) => {
        console.error(response);
      },
    });
  }

  // some code

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

HTML 文件如下：

  <table
    class="table table-striped table-hover table-sm table-bordered"
    *ngIf="companies && companies.length > 0"
    datatable
    [dtOptions]="dtOptions"
    [dtTrigger]="dtTrigger"
  >

  \\ rest of the table

在我的 angular.json 文件中：

  \\ other code

  "styles": [
              "src/styles.css",
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
            ],
 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"
            ]

package.json 文件：

"dependencies": {

   \\ other packages

    "angular-datatables": "^14.0.0",
    "datatables.net": "^1.11.3",
    "datatables.net-bs5": "^1.11.3",
    "jquery": "^3.7.0",
}

在app.module.ts文件中：

\\ other imports

import { DataTablesModule } from 'angular-datatables';

@NgModule({
  declarations: [
    // components
  ],
  imports: [

    // Modules

    DataTablesModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})

Answer 1

dtOptions: DataTables.Settings = {};