Как я могу сделать задержку в машинописи?

Question

в первую очередь при использовании угловых. У меня проблема с компонентом входа в систему, который я хочу показать на несколько секунд после того, как пользователь введет данные и получит ответ от сервера ... Сейчас все происходит быстро, и я не могу видеть счетчик в течение 7 секунд, как я хочу к .. как я могу отложить приложение, чтобы я мог видеть его? вот мой код:

компонент:

 showSpinner: boolean = false;

  showMySpinner() {
  this.showSpinner = true;
  setTimeout(() => {
    this.showSpinner = false;
  }, 7000);
  }

  constructor(private dataService: DataService, private auth: AuthService, 
  public matService: MatService) { }

  loginUser(username, password, type): void {

  switch (type.value) {

  case "ADMIN": {
    this.dataService.getLoginResponse(username.value, password.value, 
     type.value).subscribe(res => {
      **this.showMySpinner();** HERE I USE THE FUNCTION BUT IT GOES RIGHT UNDER IT AND DONT LET IT SHOW
      this.auth.updateUserType(type.value);
      sessionStorage.setItem("type", "ADMIN");
      sessionStorage.setItem("username", username.value);
      this.matService.openSnackBar(this.loginSuccess, "success");
    }, error => this.matService.openSnackBar(this.loginFailed, "error"));
    break;
    }

HTML:

<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>

спасибо

Answer 1

Вы можете использовать rxjs delay.

Вы можете добавить delay к getLoginResponse() методу в самом DataService. И переключите счетчик соответственно в файле компонента.

data.service.ts

import {delay} from 'rxjs/operators'

getLoginResponse() {
  return this.http.get(url).pipe(delay(7000));
}

component.ts

switch (type.value) {
 case "ADMIN": {
    this.showSpinner = true; // start spinner just before asynchronous request is sent
    this.dataService.getLoginResponse(username.value, password.value, 
     type.value).subscribe(res => {
      this.showSpinner = false; // stop spinner
      this.auth.updateUserType(type.value);
      sessionStorage.setItem("type", "ADMIN");
      sessionStorage.setItem("username", username.value);
      this.matService.openSnackBar(this.loginSuccess, "success");
    }, error => this.matService.openSnackBar(this.loginFailed, "error"));
    break;
}

DEMO

Answer 2

Вам нужно запустить спиннер перед вызовом.

this.showSpinner = true;
this.dataService.getLoginResponse(username.value, password.value, 
     type.value).subscribe(res => {
      this.showSpinner = false;
      ...
    }, error => this.matService.openSnackBar(this.loginFailed, "error"));
    break;