Angular-Datatables v8.0.0：复选框与多选下拉框显示[Object, Object]异常

问题根源 #

你遇到的异常显示，是因为angular-datatables在服务端模式（serverSide: true）下会自动根据columns配置渲染表格，但你同时用了*ngFor手动循环渲染tbody，导致框架自动渲染和手动渲染逻辑冲突。另外，columns中配置data: null的列，DataTables无法解析空数据，会默认输出对象的字符串形式[Object, Object]。

解决方案 #

1. 调整TypeScript配置（.ts） #

修改dtOptions的列配置，使用模板列绑定自定义内容，同时移除冲突的手动渲染逻辑：

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { DataTablesModule, DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  @ViewChild(DataTableDirective) dtElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  dropdownList: any[] = []; // 你的下拉选项数据集
  dropdownSettings: any = {
    singleSelection: false,
    idField: 'id',
    textField: 'name',
    selectAllText: '全选',
    unSelectAllText: '取消全选',
    itemsShowLimit: 3,
    allowSearchFilter: true
  };

  constructor(private newService: YourService) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      responsive: true,
      serverSide: true,
      processing: true,
      autoWidth: true,
      searchHighlight: true,
      ordering: true,
      searchDelay: 2000,
      scrollCollapse: true,
      columnDefs: [
        {
          orderable: false,
          targets: [0, 1, 3], // 禁止复选框、下拉列排序
          className: 'text-center'
        }
      ],
      ajax: (dataTablesParameters: any, callback) => {
        this.newService.getNewList("test", dataTablesParameters)
          .subscribe(resp => {
            callback({
              recordsTotal: 15,
              recordsFiltered: 15,
              data: resp.body['data'],
            });
            // 通知DataTables渲染最新数据
            this.dtTrigger.next(null);
          });
      },
      columns: [
        { data: null }, // 绑定Submit复选框模板
        { data: null }, // 绑定Skip复选框模板
        { data: 'FIELD1', defaultContent: "N/A" },
        { data: 'DRIVERS' } // 绑定下拉框模板
      ]
    };
  }

  onItemSelect(event: any) {
    // 单选项选择逻辑
  }

  onSelectAll(event: any) {
    // 全选逻辑
  }

  ngOnDestroy(): void {
    // 销毁时清理触发器，避免内存泄漏
    this.dtTrigger.unsubscribe();
  }
}

2. 调整HTML模板（.html） #

使用angular-datatables的模板列功能，直接在模板中定义自定义列内容，避免手动循环：

<!-- 定义自定义列模板 -->
<ng-template #submitCheckbox let-row="row">
  <input type="checkbox" name="websitecheck">
</ng-template>

<ng-template #skipCheckbox let-row="row">
  <input type="checkbox" name="websitecheck1">
</ng-template>

<ng-template #driversDropdown let-row="row">
  <ng-multiselect-dropdown
    [style.pointer-events]="row.SKIPPED === 1 ? 'none' : 'auto'"
    [disabled]="row.SKIPPED === 1"
    class="custom-font-size"                           
    [placeholder]="'选择驾驶员'"
    [settings]="dropdownSettings"
    [data]="dropdownList"
    [(ngModel)]="row.DRIVERS"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)"
  >
  </ng-multiselect-dropdown>              
</ng-template>

<!-- DataTables主表格 -->
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead style="width:100%; font-size: 12px;">
    <tr>
      <th dtColumnDef="0" [dtTemplate]="submitCheckbox">Submit</th>
      <th dtColumnDef="1" [dtTemplate]="skipCheckbox">Skip</th>
      <th dtColumnDef="2" class="non-editable-column astrik">Claim No</th>
      <th dtColumnDef="3" [dtTemplate]="driversDropdown">Drivers</th>
    </tr>
  </thead>
</table>

关键注意事项 #

• 服务端模式下禁止混用*ngFor手动渲染tbody：DataTables会自动处理服务端数据的加载和渲染，手动循环会导致渲染逻辑冲突。
• Angular组件（如ng-multiselect-dropdown）必须通过模板列嵌入：直接用render返回HTML字符串无法被Angular编译为组件，会导致功能失效。
• 正确触发渲染：在ajax请求完成后调用dtTrigger.next(null)，确保DataTables及时渲染最新数据。

内容的提问来源于stack exchange，提问作者Apoorva Singh