AngularJS TypeScript中Clusterize.js懒加载实现报错求助

嘿，我看到你在AngularJS TypeScript项目里用Clusterize.js实现懒加载时碰到了这个报错，咱们来拆解问题并解决它。

错误原因分析 #

你遇到的TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'，核心问题出在传给Clusterize的rows参数格式不对。

Clusterize.js要求rows必须是HTML字符串组成的数组（每个元素对应列表里的一行DOM结构），但你现在生成的是纯数字数组[1,2,3,...]。当Clusterize尝试把这些数字当作DOM节点去执行appendChild时，自然会抛出类型错误。

另外，你的controller代码里还有个语法小问题：activate()函数被错误地定义在了constructor内部，这会导致函数无法正常执行。

修复步骤 #

1. 修正rows的格式

把数字转换成符合要求的HTML字符串，比如每个数字包装成<li>标签（因为你的容器是<ul>，子元素必须是<li>）：

activate() {
    let rows = [];
    for(var i = 1; i < 50000; i++) {
        // 将数字包装为<li>的HTML字符串，可添加Clusterize默认样式类保证渲染效果
        rows.push(`<li class="clusterize-row">${i}</li>`);
    }
    console.log(rows);
    var clusterize = new Clusterize({
        rows: rows,
        scrollId: 'scrollArea',
        contentId: 'contentArea'
    });
}

2. 修正controller的函数结构

把activate()从constructor内部移出来，作为controller的类方法，并在构造函数中调用它。同时加入$timeout确保AngularJS完成视图渲染后再初始化Clusterize，避免找不到DOM容器的问题：

class cis2VCOrderCreateController implements Cis2.Finder.Column.IEntityCreator {
    constructor(private $timeout: ng.ITimeoutService) {
        // 延迟执行确保DOM已渲染完成
        this.$timeout(() => {
            this.activate();
        });
    }

    activate() {
        let rows = [];
        for(var i = 1; i < 50000; i++) {
            rows.push(`<li class="clusterize-row">${i}</li>`);
        }
        console.log(rows);
        var clusterize = new Clusterize({
            rows: rows,
            scrollId: 'scrollArea',
            contentId: 'contentArea'
        });
    }
}

3. 确认依赖引入

确保你已经在项目中正确引入了Clusterize.js的脚本和配套样式文件，这是组件正常工作的基础。

验证修复 #

完成上述修改后，Clusterize就能正确识别你传入的行数据，将它们转换成DOM节点并渲染，懒加载的功能应该就能正常运行了。

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