Javascript 如何使用+；4000-5000表单字段

正在开发用于报告站点资源时间表信息的应用程序。对于不同的位置，可以有500-600个以上的行项目，每个行项目至少有16个表单字段，尽管只有8个具有“分配”的HTML组件

一般形式布局如下所示： 每个行项目都是它自己的表单组件，位于父表单的一部分

FormArray

。表单本身由一个表单服务“管理”，该服务处理大部分数据检索以及行项目的添加和删除

在

formService

//Initiate listener on service
this.service.getDate.subscribe((data: IInterface[]) => {
      data.map(lineitem => {
          const array = this.getFormArray(lineitem.group);
          lineitem.id = array.length + 1;
          let iform = this.fb.group(new LineItemForm(lineitem));
          array.push(iform);
      });
  });

数据的ini由来自父窗体的单个调用触发，单击按钮，上面的侦听器通过

lineitem.group

将数据分发到4个单独的数组中。 这一切都是正常的

在父表单HTML中，lineitem表单按如下方式生成，

Array

来自

formService

，在那里它按页码过滤到一个静态数组中（即，在检索父级中的数组时，服务不需要调用或筛选，因为在检索数据时已经这样做了。

数组

因此应该“准备好服务”）

星期一到星期天的字段有一个

（change）

绑定到表单组件中的计算方法，在该方法的末尾，会触发

changedtectionref

来运行

this.cd.detectChanges（）

来更新每个单独的行项目表单

calculateThings(){

    // … do some calculations and form-field sets

    //Trigger change detection cycle
    this.cd.detectChanges();
}

父窗体设置为

ChangeDetection.Default

（尽管将其切换为

OnPush

不会减少侦听器的数量）

解决（部分）问题是，我已经将行项目的总数量分隔在选项卡中，每个选项卡仅在使用

*ngIf

绑定实际显示时生成。这将使活动选项卡上的侦听器数量减少到约2000-4000。但是，如果用户在两个选项卡之间来回单击，侦听器将很快重新开始添加

在某个阶段——虽然不规则且没有明确的“原因”——侦听器计数再次重置为更易于管理的2000-3000（仍然很多，但仍然有效），在响应时间出现明显延迟之前，我可以显示大约35-50行（即大约300-400个表单字段）

这就引出了几个问题：

当从一个选项卡移动到另一个选项卡时（即重新生成DOM时），是否有“清除”侦听器的方法

是否有任何方法可以“重置”DOM，使侦听器计数降至接近零

处理这么多行/表单字段的最佳（或推荐）方法是什么 （例如，如果我看一下ag Grid，它们似乎能够在100列时生成10000行，而不超过2000个侦听器？？？，尽管就我所见，它们没有计算字段）

通过限制活动DOM中表单字段的实际数量是否是控制侦听器数量的唯一方法

如果您能提供更多信息，我将不胜感激

当前的解决方案让我将表单数组拆分为多个选项卡，并对每个选项卡上超过50行的数组进行分页。这是可行的，但我想知道是否有“更干净”的解决方案

---

PS：如果我们能避免这样的评论，我将不胜感激。这虽然是一个合理的问题，但没有帮助，因为这是向用户推广的设计标准。如果您有关于如何在一个表单中为600个资源输入7天值的建设性信息，那么我洗耳恭听。

这不是一个理想的答案，因为您使用的是Angular 6，但我刚刚读到一篇文章，该文章减少了Angular 9中的事件处理程序数量和更改检测周期。这似乎很有希望，因此我希望它对您有效，前提是您可以将应用程序升级到v9

这使用了一个名为

ngzoneeventcalescing

的新选项

---

“通过事件以角度聚合减少更改检测周期”这不是一个理想的答案，因为您使用的是Angular 6，但我刚刚读到一篇文章，该文章减少了Angular 9中的事件处理程序数量并更改了检测周期。这似乎很有希望，因此我希望它对您有效，前提是您可以将应用程序升级到v9

这使用了一个名为

ngzoneeventcalescing

的新选项

---

“通过事件以角度聚合减少更改检测周期”根据NETANEL BASIC < /P>，您可以考虑使用单个委托的事件侦听器来处理多个元素。@杰姆斯听起来很有趣，您能提供更多的背景信息来实现吗？您现在使用的是绑定模板中的数据数组——FraveBuffer-/Read表单或模板。-driven/[（ngModel）]？另外，您是否使用了

ChangeDetectionStrategy.OnPush

？使用反应式表单，ChangeDetectionStrategy.OnPush，每个行项目表单都与ChangeDetectionRef和detectChanges（）分离在从行项中的方法调用一次后手动触发。因此，表单中实际启动的侦听器数量保持在最小值。但该策略似乎不会减少实际的JS侦听器（如Chrome developer窗口中所示）角度不是我真正喜欢的东西，所以我只能猜测链接的引用。我只需要谷歌“角度事件委托”您可以考虑使用单个委托的事件侦听器来处理多个元素。@杰姆斯听起来很有趣，您能提供更多的背景信息来实现吗？您现在使用的是绑定模板中的数据数组——FraveBuffer-/Read表单或模板驱动/ [（NGMead）]。？另外，您是否正在使用

变更检测策略。OnPush

？使用反应式表单，变更检测策略。

@Component({
    selector: 'lineitem',
    templateUrl: './lineitem.component.html',
    styleUrls: ['./lineitem.component.css', './../form.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
 })

constructor(
    private formService: formService,
    private modalService: BsModalService,
    private cd: ChangeDetectorRef
) {        
}

ngAfterViewInit() {
    this.cd.detach();
}

ngOnDestroy() {
    this.subscriptions.forEach(c => c.unsubscribe());
}

calculateThings(){

    // … do some calculations and form-field sets

    //Trigger change detection cycle
    this.cd.detectChanges();
}