Question

我编写了一个有角度的数据表，该表从服务器获取并填充表中的数据。代码如下：
HTML：

<table
            class="table display table-striped table-hover table-bordered row-border hover responsive nowrap"
            datatable
            [dtOptions]="dtOptions"
            datatable=""
            #dataTable
            id="issueTable"
          >
            <thead class="headColor">
              <!-- <tr>
                <th>Action</th>
              </tr> -->
            </thead>
            <tbody>
              <!-- <tr>
                <td><button class="btn btn-primary btnColor" (click)="buttonInRowClick($event)">View</button></td>
              </tr> -->
            </tbody>
          </table>

角度代码：

import { Component, OnInit, Renderer, AfterViewInit, ViewChild } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { routerTransition } from '../../router.animations';

import { DataTableDirective } from 'angular-datatables';

import 'datatables.net';
import 'datatables.net-bs4';

window['jQuery'] = window['$'] = $;

@Component({
    selector: 'app-charts',
    templateUrl: './issues.component.html',
    styleUrls: ['./issues.component.scss'],
    animations: [routerTransition()]
})
export class IssuesComponent implements OnInit {

    @ViewChild(DataTableDirective)
    datatableElement: DataTableDirective;
    message = '';
    title = 'angulardatatables';

    @ViewChild('dataTable') table;
    dataTable: any;

    /**
     * gets settings of data tables
     *
     * @type {DataTables.Settings}
     * @memberof IssuesComponent
     */
    constructor(private router: Router) { }
    dtOptions: DataTables.Settings = {};
    // someClickhandler(info: any): void {
    //     this.message = info.number + '-' + info.assignedto + '-' + info.company;
    //     console.log(this.message);
    // }
    ngOnInit(): void {
        this.dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 15,
            processing: true,
            responsive: true,
            autoWidth: false,
            dom: 'Bfrtip',
            'ajax': {
                url: 'http://localhost:8080/incident-updated',
                type: 'GET',
                dataSrc: 'result',
            },
            columns: [
                {
                    title: 'Incident',
                    data: 'number'
                },
                {
                    title: 'Product',
                    data: 'u_product'
                },
                {
                    title: 'Status',
                    data: 'state'
                },
                {
                    title: 'Created By',
                    data: 'sys_created_by'
                },
                {
                    title: 'Group',
                    data: 'assignment_group'
                },
                {
                    title: 'Category',
                    data: 'u_category'
                },
                {
                    title: 'Updated on',
                    data: 'sys_updated_on'
                },
                {
                    title: null,
                    data: null,
                    render: function(data, type, full) {
                        return '<a class="btn btn-info btn-sm" href=#/>' + 'View' + '</a>';
                      }
                }
            ]
            // ,
            // columnDefs: [
            //     {
            //         targets: -1,
            //         data: null,
            //         defaultContent: '<button>Click!</button>'
            //     }
            // ]
        };
        this.dataTable = $(this.table.nativeElement);
        console.log('table is ==>', this.dataTable);
        $('#issueTable tbody').on('click', 'button', function () {
            const data = this.dataTable.row($(this).parents('tr').data);
            console.log('Data is ==>', data);
        });
    }
    buttonInRowClick(event: any): void {
        event.stopPropagation();
        console.log('Button in the row clicked.');
        this.router.navigate(['/event-viewer']);
    }
    wholeRowClick(): void {
        console.log('Whole row clicked.');
    }
    // ngAfterViewInit() {
    //     this.renderer.listenGlobal('document', 'click', (event) => {
    //         if (event.target.hasAttribute("view-person-id")) {
    //             this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
    //         }
    //     });
    // }
}

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

ERROR TypeError: Cannot read property 'replace' of null
    at _fnSortAria (VM1053 scripts.js:16659)
    at jQuery.fn.init.<anonymous> (VM1053 scripts.js:11820)
    at VM1053 scripts.js:17237
    at Function.map (VM1053 scripts.js:456)
    at _fnCallbackFire (VM1053 scripts.js:17236)
    at _fnDraw (VM1053 scripts.js:14107)
    at _fnReDraw (VM1053 scripts.js:14150)
    at _fnInitialise (VM1053 scripts.js:15333)
    at loadedInit (VM1053 scripts.js:11893)
    at HTMLTableElement.<anonymous> (VM1053 scripts.js:11905)

如何解决此错误？

Answer 1

我不确定这一点，但是我认为这是问题所在：

{
    title: null,
    data: null,
    render: function(data, type, full) {
        return '<a class="btn btn-info btn-sm" href=#/>' + 'View' + '</a>';
    }
}

即使您在return中不使用任何字段，也应放置一些列名，例如数据：'u_product'：

{
    title: null,
    data: 'u_product',
    render: function(data, type, full) {
        return '<a class="btn btn-info btn-sm" href=#/>' + 'View' + '</a>';
    }
}

我建议您使用表格的主键列，也许将来在按钮中会有用。

无法在角度数据表中读取null的属性“替换”

1 个答案: