row().child().show() 未被 jquery 数据表拾取

Question

在遵循https://datatables.net/reference/api/row().child()中的示例之后，我在一个项目中得到了这个工作。 现在我正在开发一个新的，一切都很好，直到.show() 出现错误'Property'show()' does not exist on type Api' 我按照示例进行操作，我的导入似乎是最新的（这个 function 自 1.10 以来一直在数据表中）所以我不知道可能出了什么问题。 这是在 typescript 文件中，但据我所知，一切仍然像 javascript 一样工作。 如果我执行 row.child().show()，function 不会感到不安，但是当我将格式 function 放入其中时，它不喜欢那样。 我还是编程新手，所以非常欢迎任何帮助:) 我的 HTML 表：

        <table id="duckTable"  class="display" cellspacing="0" width="80%">
        <thead>
            <tr>
                <th>Select</th>
                <th>Id</th>
                <th>Name</th>
                <th>Type</th>
            </tr>
        </thead>
    </table>

我的 JS 表：

   var duckTable = $('#duckTable').DataTable({
        "ajax": {
            "url": "/Ducks/getDucks",
            "type": "GET",
            "dataSrc":""
        },
        paging: false,
        ordering: false,
        info: false,
        "columns": [
            {
                className: 'dropdown',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { "data": "id" },
            { "data": "name"  },
            { "data": "type" }

        ],
        order: [[1, 'asc']],
        "columnDefs": [
            {

                "render": function (data, type, row) {
                    var status = row.status;
                    var editButton = "<i name=" + row.id + " class=\"open-table\" style=\"padding-left:27px; padding-top:10px;\">&#8595</i>&nbsp;&nbsp;";
                    if (status == null || status === 'D') {
                        return editButton;
                    } else {
                        return "";
                    }
                },
                "targets": 0
            },
            {"width": "10%", "targets":0},
        ]
    });

我的 function：

 function format(d) {
    return ('<div>Still doesnt work</div>');
}

$('#duckTable tbody').on('click', 'td.dropdown', function () {
    var tr = $(this).closest('tr');
    var row = duckTable.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        row.child(format(row.data())).show();//this throws the error
        tr.addClass('shown');
    }
});

Answer 1

您提到您正在使用 TypeScript - 您收到的错误听起来像是 TypeScript 编译错误。

这是因为通过DataTables发布的Typescript API定义，调用row.child(data)返回联合类型为RowChildMethods<T> | Api<T> RowChildMethods<T> | Api<T> 。 因为 Api 类型上没有定义 .show() 方法，所以 Typescript 编译器会抛出错误。

您应该能够通过将代码拆分为两个语句来解决此问题：

row.child(format(row.data()));
row.show();