触发提交后如何在模板中加载错误消息，当后端有错误时答案

【问题标题】：How to load error message in template after submit is triggered, when backend has error触发提交后如何在模板中加载错误消息，当后端有错误时
【发布时间】：2020-02-26 11:04:29
【问题描述】：

我有一个角 8 应用程序。我想在提交按钮被触发后显示一条消息。

我有这个方法：


  @ViewChild(IsLoadingComponent, {static: false}) isLoading: IsLoadingComponent;

submit() {
    if (this.sending) {
      return;
    }

    // submit the answers and initialvalues, it is possible that the currentpage has not changed but we save it anyway.
    if (this.isSubmittable()) {
      this.sending = true;

      const answers = this.echeqService.getAnswers();

      this.healthAPI
        .postSingleEcheqSubmission(this.currentEcheqSubmission.id, {
          answers: answers,
          initialValues: {},
          currentPage: this.currentEcheqSubmission.currentPage,
          progress: this.currentEcheqSubmission.progress
        })
        .subscribe(
          results => {
            this.handleSubmitSuccess();
          },
          error => {
            setTimeout(() => {
              this.handleSubmitError('Vcheq kan niet worden verstuurd');

            }, 1000);
          }
        );
    }
  }

handleSubmitError 看起来像这样：


  handleSubmitError(msg: string) {
    console.log(this.isLoading);
    this.isLoading.displayLoadErrorMessage(msg);
  }

提交按钮的模板如下：

  <div class="echeq-send-button" (click)="submit()" [ngClass]="{ disabled: sending }">
          send <span class="fa fa-refresh fa-spin echeqprogress-spinner" *ngIf="sending"></span>
        </div>

不过如此

isLoading 在组件加载时初始化。

但是当我点击提交按钮时：this.isloading 是未定义的：

 handleSubmitError(msg: string) {
    console.log(this.isLoading);
    this.isLoading.displayLoadErrorMessage(msg);
  }

当我点击提交时出现此错误：

core.js:7376 ERROR TypeError: Cannot read property 'displayLoadErrorMessage' of undefined
    at EcheqProcessComponent.push../src/app/echeq/echeq-process/echeq-process.component.ts.EcheqProcessComponent.handleSubmitError (echeq-process.component.ts:292)
    at echeq-process.component.ts:252

那么我必须改变什么？谢谢

我是这样尝试的：

  <div class="echeq-send-button" (click)="submit()" [ngClass]="{ disabled: sending }" (error)="handleSubmitError($event)">

          send <span class="fa fa-refresh fa-spin echeqprogress-spinner" *ngIf="sending"></span>
        </div>

【问题讨论】：

有什么建议吗？谢谢
我做错了什么>??
目前还不清楚所有这些是如何联系在一起的。建议您在 3 小时前最后一次问这个问题时创建一个演示，我看你还没有这样做。调试一些纯文本非常困难。
我无法制作演示。有很多特定的组件。我不能包括那个。但我很清楚。因此，如果您按下按钮提交，IsLoadingComponent 组件是未定义的。这就是我还提到的问题
我可以给你发邮件。然后我可以发送更多

标签： javascript angular components submit

【解决方案1】：

我解决了，像这样：

 submit() {
    if (this.sending) {
      return;
    }

    // submit the answers and initialvalues, it is possible that the currentpage has not changed but we save it anyway.
    if (this.isSubmittable()) {
      this.eCheqLoaded = false;
      this.eCheqError = false;

      this.sending = true;

      const answers = this.echeqService.getAnswers();

      this.healthAPI
        .postSingleEcheqSubmission(this.currentEcheqSubmission.id, {
          answers: answers,
          initialValues: {},
          currentPage: this.currentEcheqSubmission.currentPage,
          progress: this.currentEcheqSubmission.progress
        })
        .subscribe(
          results => {
            this.handleSubmitSuccess();
          },
          error => {
            this.eCheqLoaded = false;
            this.eCheqError = false;

            setTimeout(() => {
              this.handleSubmitError('vcheq kan niet worden verstuurd')
              //this.isLoading.displayLoadErrorMessage('Vcheq kan niet worden verstuurd');
            }, 500);
          }
        );
    }
  }

【讨论】：