Angular rx js debounce

Question

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

Хотя я уже установил this.hasBeenSubmitted = true; когда запрос выполнен и [отключен] на кнопке на основе условия, пользователь все еще мог нажать кнопку несколько раз и мог сохранить несколько раз, что неправильно.

Некоторые говорят, что Angular rx js debounce может быть решением этой проблемы, может ли кто-нибудь просветить меня относительно этого? Спасибо. И как бы это помогло моей проблеме на основе кода ниже. Спасибо.

Код

save(): void {
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        (results: FeedbackRequest[]) => {
          this.hasBeenSubmitted = true;
        },
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }

html

<button [disabled]="hasBeenSubmitted"
            mat-raised-button *ngIf="form" (click)="save()" type="submit">
            <ng-container>
              <span>SAVE</span>
            </ng-container>
          </button>

Answer 1

В этот момент вы устанавливаете hasBeenSubmitted после выполнения запроса. Но так как запрос может занять некоторое время, пользователь может нажать кнопку еще раз в течение этого времени. Вы можете установить флаг перед сохранением данных:

save(): void {
    this.hasBeenSubmitted = true;
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        res => {},
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }