Блог

Главная - Вопросы по программированию - Угловой : ДИАПАЗОН ОШИБОК Ошибка: Максимальный размер стека вызовов превысил сообщение при вводе входных данных

Угловой : ДИАПАЗОН ОШИБОК Ошибка: Максимальный размер стека вызовов превысил сообщение при вводе входных данных

#angular #rxjs #rxjs-observables #angular-observable

Вопрос:

Я получаю ошибку RangeError: Максимальный размер стека вызовов превысил сообщение в консоли, когда я что-то вводил в один из этих входов

app.component.html

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

приложение.компонент.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();

  }

Похоже, что ввод одного из моих входных данных вызывает бесконечный цикл изменения значений в приложении.

Я хочу, чтобы при вводе iput1 что-то вводилось в input2, а также при вводе input2 это изменит ввод в input1.

как это исправить?

Комментарии:

1. возможно, вам потребуется установить «другое» входное значение условно, только если другое входное значение отличается от того, которое вы хотите установить. И вам нужно добавить это условие в обе ваши valueChanges подписки

2. вы устанавливаете значение (которое также вызовет изменение значения) каждый раз, когда происходит изменение значения. Таким образом, вы создаете бесконечный цикл. Какова цель этого?

3. @eko Я хочу создать приложение для конвертации валют, в котором изменение обоих входных значений приведет к изменению других входных значений

Ответ №1:

Вы можете использовать a FormGroup , содержащий ваши два FormControl .

С a 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]);
}

Ответ №2:

Вы можете передать дополнительный аргумент setValue , который должен остановить запуск изменений значений для редактируемого значения.

 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();

Ответ №3:

Ошибка возникает из-за бесконечного цикла, вызванного вашей подпиской на изменение значений, после того, как одно изменение ввода приведет к изменению второго входного значения, затем прослушиватель изменения второго значения запустит первое, и цикл продолжится, вы можете исправить это, добавив значение emitEvent: false в заданное значение элемента управления формой

   this.input2.setValue(value, {emitEvent: false});
Метки: