角数据表行详细信息功能

Question

我有使用Angular Datatables插件的Angular 8应用程序。我需要像DataTables example

中的行详细信息功能

所以，我的html：

<table [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" datatable>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td class="details-control" (click)="toggleDetails()">...</td>
            <td>...</td>
            ...
    </tbody>
</table>

并编码为ts：

ngOnInit() {
    this.dtOptions = {
        ...
        rowCallback: (row: Node, data: any[] | Object, index: number) => {
            // Unbind first in order to avoid any duplicate handler
            // (see https://github.com/l-lin/angular-datatables/issues/87)
            $('.details-control', row).unbind('click');
            $('.details-control', row).bind('click', () => {
                this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
                    let selectedRow = dtInstance.row($(row));
                    if (selectedRow.child.isShown()) {
                        this.expandedItem = null;
                        selectedRow.child.hide();
                    } else {
                        selectedRow.child(this.detailsRow(this.item)).show();
                    }
                });
            });
                return row;
            }
        };
}

detailsRow(item: any) {
    return '<span [hidden]="' + !item.description.includes('.docx') + '">' +
                '<a (click)="convertFile(' + item.id + ', \'pdf\')"><i class="far fa-file-pdf"></i> Download as PDF</a>' +
            '</span>';
}

HTML插入正确，但是没有编译成角度的，我的意思是单击处理程序对我不可用。

我该如何解决此问题？

UPDATE

demo

Answer 1

如果要完全一样，只需在this.dtOptions中添加“ response：true”。（您还需要响应式加载项link）

编辑：

如果添加const self = this;到rowcallback的第一行，然后对自己采取行动，您的代码将正常工作。