小编T. *_*wat的帖子

我正面临现有应用程序的问题,下面是我的场景我有以下JSON格式

.html代码

<div class="panel-group" id="accordion">
    <div *ngFor="let property of Tree.properties">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="link" data-toggle="collapse" data-parent="#accordion" href="#dataCatg-{{property.name}}">
              <div *ngIf="property.required">
                <span class="glyphicon glyphicon-chevron-right"></span>{{property.name}}
              </div>
              <div *ngIf="!property.required">
                <span class="glyphicon glyphicon-chevron-right"></span>{{property.name}}
              </div>
            </a>
          </h4>
        </div>
        <div id="dataCatg-{{property.name}}" class="panel-collapse collapse">
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item" *ngFor="let prop of property.details">
                <div *ngIf="prop.details.visible">
                  <div class="row">
                    <div class="col-md-4">
                      <div *ngIf="data.includes(prop.name)">
                        <label class="inline-label" for="{{prop.name}}">{{prop.name}}</label>
                      </div>
                      <div *ngIf="!data.includes(prop.name) ">
                        <label class="inline-label " for="{{prop.name}} ">{{prop.name}}</label>
                      </div>
                    </div>
                  <div class="col-md-8 ">
                      <div *ngIf="!Edit">
                        <span *ngIf="formVisible …

我使用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

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

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

谢谢.