Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

Question

当我在此输入之一中键入内容时，我在控制台中收到错误 RangeError：最大调用堆栈大小超出消息

app.component.html

<div class="container-wrap">
    <div class="container">
        <input type="number" [formControl]="input1">
        <input type="number" [formControl]="input2">
    </div>
</div>

app.component.ts

constructor() { }

  input1:FormControl=new FormControl();
  input2:FormControl=new FormControl();

  ngOnInit(): void {

    this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value);
    })).subscribe();

    this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value);
    })).subscribe();

  }

似乎在我的输入之一中键入会在应用程序中调用无休止的 valueChanges 循环。

我想在我输入 iput1 时输入它在 input2 中输入的内容，并且当我输入 input2 时它会更改 input1 中的输入。

如何解决这个问题？

Answer 1

您可以使用包含您的两个 FormControl 的 FormGroup。

FormBuilder 看起来像这样：

constructor(formBuilder: FormBuilder) {}

ngOnInit(): void {
  this.formGroup = this.formBuilder.group({
              inputA: this.input1,
              inputB: this.input2
  });
  this.formGroup.valueChanges.subscribe(values => [switch values here]);
}

Answer 2

您可以向 setValue 传递一个额外的参数，这应该会阻止您的 valueChanges 在您正在编辑的值上运行。

this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value, { emitEvent: false });
    })).subscribe();
    

this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value, { emitEvent: false });
    })).subscribe();

Answer 3

错误发生是因为你的值改变订阅引起的无限循环，一旦一个输入改变，它触发第二个输入值改变，然后第二个值改变监听器将触发第一个并且循环继续，您可以通过将 emitEvent: false 添加到表单控件设置值

来解决此问题

  this.input2.setValue(value, {emitEvent: false});

Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

rxjs

angular

angular-observable

rxjs-observables