【问题标题】:Angular Reactive Form - FormArray ChangeDection onPush not workingAngular Reactive Form - FormArray ChangeDection onPush 不起作用
【发布时间】:2023-03-07 23:44:02
【问题描述】:

我们在所有组件中都使用 ChangeDetectionStrategy Onpush,因此我们遵循转储/智能组件方法,因此我们将所有逻辑部分保留在服务/外观端。

现在我们需要使用 Reactive Forms、FormGroup、FormArray 来生成动态控件,

所以我们在服务端准备FormGroup和FormArray,并将它们作为输入参数传递给转储组件,在这种情况下我不能将它们作为可观察的行为主体传递,我直接作为输入参数传递。

如果 FormArray 中发生任何变化,由于 OnPush changeDectionStrategy,它不会反映在转储组件中。

我在这个 stackblitz 中模拟了实现

在这个示例中,我在服务文件中准备了FormArray、FormGroup,并通过智能组件传递给dump组件。

我在行为主体和抽象控制方面找不到合适的样本,

如果可以将FormArray,FormGroup作为Observable传递,请帮助我知道。

【问题讨论】:

  • 我不会通过@Input 参数传递表单控件。我会在智能组件中创建 root FormGroup,在哑组件中创建子控件。
  • 如果我们将 FornGroup 和 FormArray 保留在 Dump 组件中,它会起作用,但是,我问是否有任何可能的方式作为输入参数传递,如果我们拆分 FormGrou 和 FormArray,我们可能丢失可重复使用的转储组件,我正确吗?
  • 我不确定您是否会以这种方式丢失某些东西。使用这种方法,服务不再负责创建子表单控件,而是创建哑组件。
  • 好的,但是,我们不能从服务中传递 FormArray,不是吗?
  • 可能有办法做到这一点,但 IMO 这不是最明智的方法

标签: angular rxjs angular-reactive-forms angular-forms rxjs-observables


【解决方案1】:

在 stackblitz 示例中,即使在 Layer-Container 组件中,FormGroup 和 FormArrays 也是未定义的,因为变量是在加载初始数据之前从服务中获取的。如果这样做,然后获取服务变量并将其传递给子组件,则将获得值。

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { LayerService } from '../layer.service';

@Component({
  selector: 'app-layer-container',
  templateUrl: './layer-container.component.html',
  styleUrls: ['./layer-container.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayerContainerComponent implements OnInit {
layerFormGroup ;
layerFormArray ;

  constructor(private service : LayerService) { 
    this.service.loadInitialData();
    this.layerFormGroup = this.service.layerFormGroup;
    this.layerFormArray = this.service.layerFormArray; 
  }

  ngOnInit() {
    this.service.loadInitialData();
  }

}

由于 FormArray 和 FormGroup 都不是原始数据类型,@Input() 无法识别更改,我们可能无法检测到更改。传递这些变量的新引用可能就行了。

【讨论】:

  • 感谢您的回复,在我的应用程序中,我已经尝试在构造函数中初始化控件,但它加载了初始空控件,一旦数据来自服务器,则补丁值未反映,而且我不知道如何传递这些变量的新引用,这就是我到达这里的原因。谢谢
  • 当你有新值时,尝试执行 this.layerFormGroup = [...this.layerFormGroup] 或 this.layerFormGroup = JSON.parse(JSON.stringify(this.layerFormGroup))跨度>
  • 在这里,我们主要关注 FormArray,而不是 FormGroup,我尝试了大多数场景,正如您在上面所建议的那样,当我尝试使用 FormArray 时,它会抛出错误,因为 FormArray is not Array输入。
  • 你试过JSON解析,stringify方法吗?让我检查一下其他可能的方法。
猜你喜欢
  • 1970-01-01
  • 2021-05-02
  • 2023-03-14
  • 2021-06-04
  • 2021-05-30
  • 2019-03-13
  • 2018-07-15
  • 2018-01-26
  • 2020-07-24
相关资源
最近更新 更多