Question

我正在尝试从API中提取数据并将其显示在DataTables中。代码如下：

<table class="table display table-striped table-hover table-bordered row-border hover" [dtOptions]="dtOptions" datatable="" #dataTable></table>

JavaScript：

@ViewChild(DataTableDirective)
@ViewChild('dataTable') table;
datatableElement: DataTableDirective;
dataTable: any;
dtOptions: any;  
message = '';
title = 'angulardatatables';  
ngOnInit(): void {
    this.dtOptions = {
        pagingType: 'full_numbers',
        pageLength: 15,
        processing: true,
        responsive: true,
        dom: 'Bfrtip',
        'ajax': {
            url: 'http://localhost:8080/incident',
            type: 'GET'
        },
        columns: [
            {
                title: 'Incident',
                data: 'number'
            },
            {
                title: 'Product',
                data: 'u_product'
            },
            {
                title: 'Status',
                data: 'incident_state'
            }
        ]
    };
    this.dataTable = $(this.table.nativeElement);
    this.dataTable.DataTable(this.dtOptions);
}

运行该代码时，出现以下错误：

DataTables警告：表ID = DataTables_Table_0-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3

我确保节点的数据表尚未初始化，并且我正在使用此link和此link中给出的技术。

如何解决此错误？

Answer 1

解决了！
新代码是：

<table class="table display table-striped table-hover table-bordered row-border hover" datatable [dtOptions]="dtOptions" datatable="" #dataTable>
          </table>

JavaScript：

    @ViewChild(DataTableDirective)
    datatableElement: DataTableDirective;
    message = '';
    title = 'angulardatatables';
    constructor(private router: Router) {}
    dtOptions: DataTables.Settings = { };
    ngOnInit(): void {
        this.dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 15,
            processing: true,
            responsive: true,
            dom: 'Bfrtip',
            'ajax': {
                url: 'http://localhost:8080/incident',
                type: 'GET',
                dataSrc: "result"
            },
            columns: [
                {
                    title: 'Incident',
                    data: 'number'
                },
                {
                    title: 'Product',
                    data: 'u_product'
                },
                {
                    title: 'Status',
                    data: 'state'
                }
            ]
        };
    }

从api中提取数据时在Angular 7中使用数据表时发生重新初始化错误

1 个答案: