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

【问题标题】：angular datatables row details feature角度数据表行详细信息功能
【发布时间】：2019-11-20 10:37:06
【问题描述】：

我有使用 Angular Datatables 插件的 Angular 8 应用程序。我需要数据表中的行详细信息功能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

【问题讨论】：

尝试为它创建一个demo，这样可以更快地解决。
@Allabakash 不幸的是无法在这里工作stackblitz.com/edit/angular-4fsdah，但我认为您可以理解。

标签： angular datatables angular-datatables

【解决方案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 '';
  }

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

【讨论】：

【解决方案2】：

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

编辑：

如果你添加 const self = this; 到 rowcallback 的第一行，然后您的代码将起作用。

【讨论】：