angular 数据表行详细信息功能

Question

我有 Angular 8 个使用 Angular Datatables 插件的应用程序。我需要 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 已正确插入，但 angular 未编译，我的意思是我无法使用点击处理程序。

我该如何解决这个问题？

更新

demo

Answer 1

如果您想要完全相同，只需将 "responsive: true" 添加到 this.dtOptions。（您还需要响应式插件 link ）

编辑：

如果加上const self = this; 到 rowcallback 的第一行并在之后自行执行您的代码将起作用。

Answer 2

您可以 html 动态内容并在组件本身中绑定点击事件，如下所示。

以下代码将进入 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 '';
  }

这样就可以绑定点击事件了。希望这有帮助。

angular 数据表行详细信息功能

angular datatables row details feature

datatables

angular-datatables

angular