创建带延迟的可观察对象的多种方法| Angular例子

本教程展示了一个在Angular和typescript中创建带延迟的可观察对象的例子。

Observable 在RXJS中，obeservable是用于异步操作的Angular应用程序的对象。

如何创建一个带延迟的可观察对象

-创建一个字符串类型的数组，并用字符串值对其进行初始化。

• 使用（）从rxjs ，创建一个可观察数组。而pipe ，用于附加4000毫秒的delay 操作。

  private myarray: string[] = ["test", "test2", "test3"]
  array1: Observable = of(this.myarray).pipe(delay(4000));

下面是一个angular的完整代码

import { Component } from '@angular/core';
import { delay, from, Observable, of, take, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private myarray: string[] = ["test", "test2", "test3"]
  array1: Observable = of(this.myarray).pipe(delay(5000));

  private result: string[] = [];
  constructor() {
    console.log("start")
    this.array1.subscribe(item => console.log(item));
    console.log("end")
  }

}

你会看到控制台日志如下，4秒后打印出数组。

start
end
['test', 'test2', 'test3']

假设你想用计时器来延迟每个数组元素。

concatMap 用来映射可观察到的字符串，延迟3秒。

  private myarray: string[] = ["test", "test2", "test3"]
  strings$: Observable = of(this.myarray);
  result: Observable = from(this.myarray).pipe(concatMap(item => of(item).pipe(delay(3000))));

下面是一个angular代码，为数组元素延迟3秒。

import { Component } from '@angular/core';
import { concatMap, delay, from, Observable, of, take, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private myarray: string[] = ["test", "test2", "test3"]
  strings$: Observable = of(this.myarray);
  result: Observable = from(this.myarray).pipe(concatMap(item => of(item).pipe(delay(3000))));

  constructor() {
    console.log("start")
    this.result.subscribe(item => console.log(item));
    console.log("end")
  }

}

每个数组元素都以3秒的延迟打印到控制台

输出:

start
end
test
test2
test3