时间戳

首页 > 解决方案 > 将从 rxjs “from” 运算符获取的对象的 observable 转换为数组的 observable

angular - 将从 rxjs “from” 运算符获取的对象的 observable 转换为数组的 observable

问题描述

我在遍历 Observable 时遇到了这个错误。我知道它正在考虑将 getNumbers 方法的返回值作为对象而不是数组。但是，我不想处理数据并创建数组，然后将其传递给查看。

我希望它是数字数组的 Observable 并将这个数组与 ngFor 和 async 一起使用来显示每个元素。请让我知道如何实现这一目标。

这是代码

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor() {}

  getNumbers(): Observable<number> {
    return from([1, 2, 3, 4, 5]);
  }
}

app.component.ts

import { Component } from '@angular/core';
import { ApiService } from './api.service';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  number$;
  constructor(api:ApiService)
  {
    this.number$=api.getNumbers();
  }
}

这是视图逻辑

  <ul>
    <li *ngFor="let num of this.number$|async">
        {{num}}
    </li>
  </ul>

这里是源代码参考

https://stackblitz.com/edit/angular-yaj6a4

标签： angularrxjs

解决方案

这里

  getNumbers(): Observable<number> {
    return from([1, 2, 3, 4, 5]);
  }

生成的 observable 立即发出五个值，从 1 到 5。如果要渲染[1, 2, 3, 4, 5]，则需要 1Observable<number[]>和 2，of而不是from。

  getNumbers(): Observable<number[]> {
    return of([1, 2, 3, 4, 5]);
  }

推荐阅读