Question

在遍历Observable时遇到此错误。我知道它正在考虑将getNumbers方法的返回值作为Object而不是Array。但是，我不想处理数据并创建数组，然后将其传递给视图。

我希望它是number数组的可观察对象，并将此数组与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

Answer 1

这里

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

生成的可观察对象立即发出5到1到5的值。如果要渲染[1, 2, 3, 4, 5]，则需要一个Observable<number[]>和两个of而不是{{1 }}。

from

Answer 2

将number更改为Array<number>以使其返回数组，并将from更改为of：

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

然后，您确实可以在模板中使用| async管道，那么您将不需要手动订阅。

将从rxjs“ from”运算符获取的对象的可观察对象转换为数组的可观察对象

2 个答案: