我怎样才能延迟打字稿？答案

【问题标题】：How can i make delay in typescript?我怎样才能延迟打字稿？
【发布时间】：2018-07-02 19:50:41
【问题描述】：

首先在使用角度。我有登录组件的问题，我想在用户输入详细信息并从服务器获得响应后显示微调器几秒钟......现在一切都发生得很快，我无法像我想要的那样在 7 秒内看到微调器to..我怎样才能延迟应用程序以便我可以看到它？这是我的代码：

组件：

 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>

谢谢

【问题讨论】：

标签： html angular angular-material spinner

【解决方案1】：

您可以使用rxjs delay。

您可以在DataService 本身中将delay 添加到getLoginResponse() 方法。并在组件文件中相应地切换微调器。

data.service.ts

import {delay} from 'rxjs/operators'

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

组件.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

【讨论】：

即时消息“属性”延迟“不存在于类型“Observable
对不起，我忘了包括pipe。 this.http.get(url).pipe(delay(7000));
检查更新stackblitz.com/edit/… 这利用http.get() 并增加了延迟。使用演示链接更新答案
@אוראלהינדי 如果这有帮助，请将答案标记为已解决。

【解决方案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;

【讨论】：

然后你可以把你的 timout 放在this.showSpinner = false; 所在的位置。但是看到它的目的是什么？只是让你看看它是否有效吗？否则，用户在登录完成后通常不需要看到微调器。
我希望用户在按下登录按钮并从服务器获得响应后 5 秒内看到它.. 只是为了造型.. 我不希望用户在按下之前看到它登录按钮
因此，在您单击按钮功能时，首先，您将拥有this.showSpinner = false。然后，当您获取用户时，您可以拥有this.showSpinner = true
没有运气