小编Rip*_*bra的帖子

我正在使用div开发一个n级嵌套表的脚本.

因此,有5到6列有n行数,每个第一列都必须展开/折叠按钮,点击后我调用API,它给出了与所选行过滤器相对应的数据.

以前当我使用核心JavaScript和jQuery时,我使用find文档选择器的方法来识别展开/折叠按钮的父级,并在仅使用innerHTML或appendjQuery方法之后推送动态创建的HTML之后的特定div

我对角度有点新意,并没有多少工作.请帮我解决这个问题.

splitOpt 是一个对象数组,我将根据该数组拆分报告数据.

this.splitOpt = [
    {
        id: "country",
        label: "Country"
    },
    {
        id:"os".
        label:"Operating System"
    },
    {
        id:"osv".
        label:"Operating System Version"
    }
]

获取报告的功能

getReport() {

    // apiFilters are array of object having some values to filter report data  
    var apiFilters: any = [{}];
    for (var i = 0; i < this.sFilters.length; i++) {

        if (this.sFilters[i][0].values.length > 0) {
            var k;
            k = this.sFilters[i][0].id
            apiFilters[0][k] = this.sFilters[i][0].values;
        } …

我使用angular 5的动态组件创建了n级嵌套展开/折叠功能.

功能上一切正常,但当我加载多个dom元素时,浏览器崩溃或滚动停止工作(Jerky Scroll)

基本上它的高级报告功能包括用户选择的过滤器和我们提供的维度.

以下是我开发的功能的工作原理

1)用户访问Web应用程序上的报告页面.2)用户选择过滤器和groupby参数,根据该参数我生成具有多行的基于div的表.

现在我保持条件检查,用户可以进一步扩展/折叠行,基于我使用group by维护的对象.这里group by表示用户可以使用的级别数

例如,按参数分组是国家,操作系统,Appname和Campaign,我将使用展开按钮为每行显示所有可用国家/地区的数据,单击展开按钮我将呈现另一个具有操作系统(OS)数据的表对于那个特定国家等等......

我实际上已经确定了为什么会出现性能问题,这可能是因为我正在检查由下一个groupby对象和isCollapsed参数标识的特定展开/折叠按钮.由于特定条件是多次定期检查滚动停止工作或浏览器开始执行缓慢

这是一段视频,说明了它的工作原理和滚动条性能

https://youtu.be/m1a2uxhoNqc

我无法在plunker或任何其他在线工具上上传代码,因为它已经集成到我正在开发的具有实际数据的平台中.

由于stackoverflow字符限制,我无法在此处添加代码,但已创建了gist.

这是访问代码的URL:

https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing

一旦性能问题得到解决,我想让代码更可重用.

看看这个,让我知道我的错误,以改善代码质量和性能问题.

谢谢.