代码之家 › 专栏 › 技术社区 › Jimmyt1988

如何在角6/typescript中延迟观测

typescript angular

3

Jimmyt1988 · 技术社区 · 7 年前

我有以下方法 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;
    }
}

我试图将该方法返回其数据的时间延迟2秒。

我做错什么了?我对Angular 6和Typescript是全新的。

我这样称呼它:

this.userService.GetCurrentUserDelayedTest()
    .subscribe((currentUser) => {
        this.loadingGameState = false;
    });

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

<div *ngIf="loadingGameState">Loading App</div>
<div *ngIf="!loadingGameState">
  Welcome
</div>

编辑:

“promise”类型的参数不能分配给“operatorfunction”类型的参数。类型“promise”不提供与签名匹配的内容(来源:observate):observate)。

2 回复 | 直到 7 年前

1

13

izmaylovdev 7 年前

你可以用 delay 功能

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

2

1

Bogdan Bogdanov 7 年前

https://stackblitz.com/edit/angular-mznw5m?file=src%2Fapp%2Fuser.service.ts

在声明中使用 Observable observable.next() 所以你可以触发订阅服务器。

3

1

Ilya Scharrenbroich 6 年前

使用httpclient的更详细示例:

of(null).pipe(
  delay(2000),
  flatMap(() => {
    return this.http.post<any>(url, params);
  })
);