聚类角度js Typescript中的滚动错误

Question

Trying to implement the lazy loading using the Clusterize js in Angular js Typescript. Unfortunately getting the errors.

Any expert advice please?

HTML VIEW

<div id="scrollArea" class="clusterize-scroll">
    <ul id="contentArea" class="clusterize-content"></ul>
</div>

Angular JS

namespace Cis2.VC.OrderCreate {

angular.module("cis2")
    .directive("cis2VCOrderCreate", directiveDefinition);

templateUrl = "sections/vc/columns/vcOrderCreate/view.html";

function directiveDefinition () {
         directive = {
        "bindToController": true,
        "controller": cis2VCOrderCreateController,           
        "templateUrl": templateUrl
    };
 }

class cis2VCOrderCreateController implements Cis2.Finder.Column.IEntityCreator {    

        constructor() {    

        activate () {            
            let rows   = [];
            for(var i = 1; i < 50000; i++) {
                rows.push(i);
            }
            console.log(rows);
            var clusterize = new Clusterize({
                rows: rows,
                scrollId: 'scrollArea',
                contentId: 'contentArea'
            });
    }
}

}

Console errors

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at Clusterize.html (http://localhost:63342/cis-ui-src/public/lib/clusterize/clusterize.js:341:26)      

Answer 1

You are supposed to supply markup to the rows option. Numbers won't work. From the documentation:

rows
If you render rows by yourself - pass array of tags in String. This way is preferable. If you need to use existing markup - do not specify this option at all.

    activate () {            
        let rows   = [];
        for(var i = 1; i < 50000; i++) {
            rows.push("<li>" + i + "</li>");  //this must be a string of markup
        }
        console.log(rows);
        var clusterize = new Clusterize({
            rows: rows,
            scrollId: 'scrollArea',
            contentId: 'contentArea'
        });