Проблема с обновлением div для отображения формы отправки, выполненной пользователем Angular

Question

Я хочу отобразить отправку, выполненную пользователем после отправки формы, путем скрытия области формы и отображения ответа в этой области.

Итак, при отправке формы я должен показать циновка, пока ответ не получен с сервера.

Код для файла компонента. 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
);

Попробуйте его.