angular - Angular：错误 RangeError：当我输入输入时，超出了最大调用堆栈大小消息

Question

当我在其中一个输入中键入内容时，我在控制台中收到 ERROR RangeError: Maximum call stack size exceeded 消息

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 中的输入。

如何解决这个问题？

标签： angularrxjsrxjs-observablesangular-observable

Answer 1

你可以使用一个FormGroup包含你的两个FormControl.

使用 aFormBuilder它看起来像这样：

constructor(formBuilder: FormBuilder) {}

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