Angular Datatables重命名every方法参数出现类型不匹配错误如何解决

问题原因 #

TypeScript 函数签名中的this: RowMethods属于虚拟类型参数，仅用来约束函数执行时内部this的类型，不属于实际入参列表，你将它作为第一个入参定义的写法不符合类型要求，因此会抛出类型不匹配的错误。

同时你遇到的上下文this冲突问题，是因为every方法的回调内部this被绑定为行实例，无法直接访问组件实例的this，可以用以下两种方案解决：

方案1：外部缓存组件实例（改动最小） #

在回调外部先缓存组件的this引用，回调内部直接用缓存的变量访问组件属性即可：

@ViewChild(DataTableDirective, { static: false }) dtElement: DataTableDirective;
dtData: {id: number, name: string, selected: boolean}[];

selectAll(): void {
    // 提前缓存组件实例的this
    const componentThis = this;
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.rows({ page: 'current' }).every(function() {
            // 这里的this还是行实例，可正常调用data()
            const id = this.data()[0];
            // 用缓存的componentThis访问组件的dtData
            const currentRow = componentThis.dtData.find(item => item.id === id);
            currentRow.selected = true;
        });
    });
}

方案2：用箭头函数+主动取行数据（代码更整洁） #

如果不想额外声明缓存变量，可以将回调改为箭头函数继承组件的this，同时通过入参的行索引主动获取行数据，不需要依赖回调内部绑定的行实例this：

selectAll(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // 箭头函数内部this直接指向组件实例
        dtInstance.rows({ page: 'current' }).every((rowIdx) => {
            // 主动通过dtInstance获取当前行数据，不用依赖回调绑定的this
            const rowData = dtInstance.row(rowIdx).data();
            const id = rowData[0];
            const currentRow = this.dtData.find(item => item.id === id);
            currentRow.selected = true;
        });
    });
}

两种方案都可以正常运行，可根据自己的编码习惯选择。

内容的提问来源于stack exchange，提问作者Newbie