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>
            ...
        </tr>
    </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插入正确，但是没有编译角度，我的意思是单击处理程序对我不可用。

如何解决此问题？

更新

demo

Answer 1

您可以动态html内容，并将click事件绑定到组件本身，如下所示。

以下代码将进入rowCallback函数。

selectedRow.child(this.detailsRow(item, index)).show();
const type = item.name.includes('.docx') ? 'docx' : (
item.name.includes('.pdf') ? 'pdf' : ''
);
if (type !== '') {
    $(`.pointer${index}`).bind('click', () => {
        this.convertFile(item.id, type);
    });
}

及其后将是detailsRow函数。

detailsRow(item: any, index: number) {

    if (item.name.includes('.docx')) {

      return `<span> <a class="pointer${index} ml-3">
        <i class="far fa-file-pdf"></i> Download as DOCX</a>
        </span>`;
    } else if (item.name.includes('.pdf')) {

      return `<span> <a class="pointer${index} ml-3">
        <i class="far fa-file-pdf"></i> Download as PDF</a>
        </span>`;
    }

    return '';
  }

这样，您可以绑定click事件。希望这会有所帮助。

Answer 2

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

编辑：

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

角度数据表行详细信息功能

2 个答案: