如何延迟Angular 6/Typescript中的observable

Jim*_*988 4 typescript angular

我有以下方法GetCurrentUserDelayedTest,我想延迟.我在这里留下了原始实现GetCurrentUser来演示我最初是如何使用它的:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { User } from '../models/user';

export class UserService {

    // Normal method without delay
    public GetCurrentUser(): Observable<User>
    {
        return of(new User(""));
    }

    // Method with delay attempt at code
    public GetCurrentUserDelayedTest(): Observable<User>
    {
        var observable = new Observable<User>((observable) => {
            setTimeout(() => {
                return observable.complete();
            }, 2000);
        });

        observable.subscribe(() => {
            return of(new User(""));
        });

        return observable;
    }
}
Run Code Online (Sandbox Code Playgroud)

我试图延迟该方法将其数据返回2秒.

我究竟做错了什么?我是angular 6和打字稿的新手.

我这样称呼它:

this.userService.GetCurrentUserDelayedTest()
    .subscribe((currentUser) => {
        this.loadingGameState = false;
    });
Run Code Online (Sandbox Code Playgroud)

"加载应用程序"部分保留在屏幕上(不会抛出任何错误),而不是更新视图以显示"欢迎"

<div *ngIf="loadingGameState">Loading App</div>
<div *ngIf="!loadingGameState">
  Welcome
</div>
Run Code Online (Sandbox Code Playgroud)

编辑:

在此输入图像描述

"Promise"类型的参数不能分配给"OperatorFunction"类型的参数.类型'Promise'不提供签名'(source:Observable):Observable'的匹配.

izm*_*dev 14

你可以使用延迟功能

public GetCurrentUserDelayedTest(): Observable<User>
{
    return of(new User(""))
       .pipe(delay(2000));
}
Run Code Online (Sandbox Code Playgroud)

  • 你从'rxjs / operators'导入`delay`吗? (4认同)
  • 你可以查看这个页面http://reactivex.io/documentation/operators.html#categorized (2认同)