Новое значение углового редукса сохраняется в хранилище после того, как событие клика получает старые данные из хранилища. - PullRequest
Новая
       24

Новое значение углового редукса сохраняется в хранилище после того, как событие клика получает старые данные из хранилища.

0 голосов
/ 01 октября 2019

У меня есть базовый угловой компонент с дочерним компонентом ввода. Данные сохраняются для сохранения (изменения) события дочернего компонента ввода. Проблема в том, что, если я получаю данные из хранилища, получение выполняется до того, как новые данные будут сохранены для хранения. Вот код: Пользовательский дочерний компонент ввода имеет событие изменения: 

 <input
matInput
placeholder="{{ _placeholder }}"
(change)="onChange()"
[formControl]="numberControl"
maxlength="30"/>

Функция onChange () просто распространяет изменение в родительскую группу форм: 

onChange() {
console.log(
  'Input control onChange event START. New Value:',
  this.numberValue
);
this.propagateChange(this.numberValue);
console.log('Input control onChange event END');

}

Это использование пользовательского элемента управления в родительском: 

<div [formGroup]="rowForm" fxLayoutGap="1rem" fxLayoutGap.xs="0">
<shared-ui-kit-number-decimal
class="form-control"
formControlName="workingHours"
style="display: inline-block;"
placeholder="{{
  rowData.workingHours
    ? (rowData.workingHours.metaData.placeHolderText | translate) +
      ' ' +
      (rowData.workingHours.metaData.currency || '')
    : ''
}}"
[decimalOption]="true"
[rangeMax]="workingHoursMaxValue"
[errorMsg]="
  rowData.workingHours?.metaData.errorMessage
    ? (rowData.workingHours?.metaData.errorMessage | translate)
    : ''
"
></shared-ui-kit-number-decimal>

В родительском я слушаю form.valueChanges и затем выдаю событие для сохранения данных в хранилище: 

 this.rowForm.valueChanges
    .pipe(          
      takeUntil(this.destroy$)
    )
    .subscribe(formData => {         

      if (this.rowForm.valid) {
        console.log(
          "Input's parent FORM value change emit. New Value:",
          this.rowForm.controls['workingHours'].value
        );
        this.labourRowDataChanged.emit(this.constructRowData(this.rowForm));
        console.log("Input's parent FORM value change emit END");
      }
    });
}

Теперь в другом компоненте у меня есть кнопка, которая сохраняет данные из хранилища на сервер: 

saveDecisionClaimToBE() {
console.log('Summary component click event START');
this.facade.saveDecisionToBE(ClaimDecisionSave.ActionEnum.Save);
console.log('Summary component click event end');

}

Проблема заключается в том, что выполнение события происходит в следующем порядке, когда пользовательнажимает кнопку «Сохранить» после того, как он вводит новое значение в пользовательский элемент управления: 1. изменение пользовательского элемента управления 2. нажатие кнопки -> селектор для получения данных из хранилища (возвращает старое значение, поскольку новое еще не сохранено) ->выполняется эффект, который отправляет данные в BE 3. родительский элемент управления custom form.valueChanges -> новое значение, сохраняемое для хранения

Вот консольные журналы порядка выполнения кода: enter image description here

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

...