如何在Angular中声明和初始化一个可观察的对象数组实例本教程展示了一个例子，用于声明一个可观察数组如何在Angu

本教程展示了一个例子，用于

声明一个可观察数组
如何在Angular应用程序中创建一个可观察数组？
将可观察数组转换为数组
在HTML中显示可观察数组
可观察数组的长度。

可观察数组是RXJS中用于异步操作的Angular应用程序的对象。

如何在Angular中声明和初始化一个可观察的对象数组

创建一个可观察数组

public observableUsers$: Observable[]=[];

用户在Typescript中是一个类或接口。$符号是声明一个可观察对象的符号，并不是强制性的。创建一个空的User对象类型的可观察数组。

初始化一个可观察数组

让我们创建一个字符串的可观察数组。

public observableUsers$: Observable[]=[];

并使用Observable类型初始化一个字符串的数据。

public observableUsers$: Observable[]=of(["test", "test2", "test3"]);

Observable 和 of是从rxjs 模块导入的类型。

import { Observable, of } from 'rxjs';

下面是一个在Angular中创建可观察数组的组件代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private strings$: Observable = of(["test", "test2", "test3"]);

  constructor() { }

}

将可观察数组转换为/从数组

有时，我们需要将Observable转换为数组。

让我们来看看如何做到这一点。

将Observable转换为数组的例子

通常，我们有一个用于API消费的订阅方法，在这个方法中，我们有可观察的数据，无需任何API就可以直接转换为数组。

另一种方法是使用rxjs的Pipe 和Take 方法。

    this.strings$.pipe(tap(res => this.result = res));

下面是一个在Angular中从可观察数据中获取数组的代码示例。

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

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

}

如何在Angular中把数组转换为可观察数据。

我们可以使用Observable.of方法来将数组转换为可观察数组。

声明并初始化一个数组把这个数组传给of 方法

  private myarray: string[] = ["test", "test2", "test3"]
  private strings: Observable = of(this.myarray);

下面是Angular中的一段完整代码。

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

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

  constructor() { }

}

Angular中可观察数组的长度

有时，我们想找到一个数组的长度来检查一个空的长度。

我们必须使用ngIf指令的async来检查一个可观察数组的长度。

下面是一个代码片段

<div *ngIf="(strings$ | async)?.length==0">No Strings found.</div>

在Angular中打印和显示可观察数组对象

Angular使用ngFor指令来显示可枚举数据。

为了显示可观察的数据，使用一个async 管道与ngFor指令，如下图所示。

<div *ngFor='let str of strings$ | async'>
    {{str}}
</div>

你也可以使用同样的语法来显示一个对象类型的数组。