订阅多个字段的 valueChanges 导致反应形式 angular 2 的性能问题

Posted 2023-03-13

【中文标题】订阅多个字段的 valueChanges 导致反应形式 angular 2 的性能问题

【英文标题】：Subscribing to valueChanges for multiple fields is causing performance issue in reactive form angular 2

【发布时间】：2021-04-09 15:46:38

【问题描述】：

我有 50 多个字段，它们是响应式表单中的输入文本和下拉菜单。这些字段相互依赖于彼此的值更改，以触发验证并在选择后显示相关字段。

我订阅了 ngOnInit() 中的值变化如下：

  ngOnInit() 

    this.setPageValidation();

  

  setPageValidation() 
    this.NameSubscription = this.FormGroup.get('personnel').get('name').valueChanges.subscribe(data 
      => 
     this.enableOrders();
    );

   this.StateSubscription = this.FormGroup.get('personnel').get('state').valueChanges.subscribe(data 
     => 
    
      this.enableAccount();
    );
   
    // more value changes subscription like 40 fields ............................
  

在加载表单时，由于订阅了表单加载时的值更改，因此加载时间较长。

我尝试实现它以将代码移动到 ngOnChanges() 但它不会触发其他字段的启用和显示，具体取决于从表中填充的初始值（如果有值）那些领域。它只是填充第一个字段，其余字段不会根据其值显示。

我想提前感谢您。如果有没有性能问题的最佳解决方法，我非常感谢您的帮助。

【参考方案1】：

您可以只订阅一次。

this.personnelSubscription = 
  this.Formgroup.get('personnel').valueChanges.subscribe(data => 
     if (data) 
        //Console log the data here. It will print the formGroup of personnel
        // then select the control and add your validations
        // like this data.controls.state
     
  )