更新div以显示用户执行的表单提交的问题 Angular

Question

我想在表单提交后，通过隐藏表单区域并在该区域显示响应来显示用户的提交。

因此，在提交表单时，我应该显示一个mat-spinner，直到服务器收到响应。

component.html文件的代码如下。

  <div fxFlex [hidden]="!submitted">
    <mat-list *ngIf="feedback">
      <mat-list-item>
        <h4>Your Submission</h4>
        <p matLine>Id: {{feedback.id}}</p>
        <p matLine>First Name: {{feedback.firstname}}</p>
        <p matLine>Last Name: {{feedback.lastname}}</p>
        <p matLine>Tel. Number: {{feedback.telnum}}</p>
      </mat-list-item>

    </mat-list>

    <div [hidden]="feedback">
      <mat-spinner></mat-spinner><h4>Submitting Form</h4>
    </div>
  </div>

而component.ts部分的代码如下：

   this.feedbackService.submitFeedback(this.feedback)
    .subscribe(
      feedback => (this.feedback = feedback,
      console.log(feedback))

    );

这是服务文件

submitFeedback(feedback: Feedback): Observable<Feedback> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    return this.http.post<Feedback>(baseURL + 'feedback/', feedback, httpOptions)
    .pipe(catchError(this.processHTTPMsgService.handleError));
  }

所以问题是，当我提交表单的时候，我是向服务器发出POST请求来发送反馈。现在我想显示用户提交的反馈，但是当点击提交时，它直接显示我在表单中使用的值，而不是使用服务器的值，但是在2秒后（我为服务器的响应设置了2秒的延迟），同一个区域被更新为从服务器收到的值，这是我实际想要的工作方式。

现在我想避免使用即时的表单值，而是希望等待2秒，这样微调器也能看到。

我想我已经把问题解释清楚了。

Answer 1

你可以简单地声明一个标志来隐藏或不隐藏这块表单。

<div fxFlex [hidden]="!submitted">

    <mat-list *ngIf="!waiting && feedback else loading">
        <mat-list-item>
        <h4>Your Submission</h4>
        <p matLine>Id: {{feedback.id}}</p>
        <p matLine>First Name: {{feedback.firstname}}</p>
        <p matLine>Last Name: {{feedback.lastname}}</p>
        <p matLine>Tel. Number: {{feedback.telnum}}</p>
        </mat-list-item>

    </mat-list>

    <ng-template #loading>
        <div>
            <mat-spinner></mat-spinner><h4>Submitting Form</h4>
        </div>
    </ng-template>

</div>

ng-template 定义了一个默认情况下不会被渲染的模板。渲染 loading (模板)将被触发。*ngIf.

该 *ngIf 评估第二个标志。waiting 应该设置为 true 每当 HTTP请求 被发送，并设置为 false 响应到达时。

this.waiting = true;
this.feedbackService.submitFeedback(this.feedback)
    .subscribe(
      feedback => {
            this.feedback = feedback;
            console.log(feedback);
            this.waiting = false;
      }, err => this.waiting = false; // In case the HTTP request fails
);

试试吧