Angular 6/Typescript'te bir observable'ı nasıl geciktiririm


Aşağıdaki GetCurrentUserDelayedTest adlı yönteme bir gecikme eklemek istiyordum. Orijinal uygulamayı burada bıraktım GetCurrentUser şekilde, onu ilk olarak nasıl kullandığımı göstermek için:

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;
    }
}

Yöntemin verilerini döndürmesini 2 saniye geciktirmeye çalışıyorum.

Ne yapıyorum yanlış? Angular 6 ve TypeScript'e yeni başladım.

Bunu şöyle adlandırıyorum:

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

"Yükleniyor Uygulama" kısmı ekranda kalıyor (hiçbir hata verilmiyor), bunun yerine görünümü "Hoş Geldiniz" olarak güncellemiyor

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

Düzenle:

‘Promise’ türündeki argüman, ‘OperatorFunction’ türündeki parametreye atanamaz. ‘Promise’ türü, ‘(source: Observable): Observable’ imzasıyla eşleşme sağlamaz.

Cevap #1

gecikme fonksiyonunu kullanabilirsiniz

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

Cevap #2

HttpClient kullanarak daha ayrıntılı bir örnek:

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

İlgili makaleler