在遍历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>
这是源代码参考
答案 0 :(得分:1)
这里
getNumbers(): Observable<number> {
return from([1, 2, 3, 4, 5]);
}
生成的可观察对象立即发出5到1到5的值。如果要渲染[1, 2, 3, 4, 5]
,则需要一个Observable<number[]>
和两个of
而不是{{1 }}。
from
答案 1 :(得分:0)
将number
更改为Array<number>
以使其返回数组,并将from
更改为of
:
getNumbers(): Observable<Array<number>> {
return of([1, 2, 3, 4, 5]);
}
然后,您确实可以在模板中使用| async
管道,那么您将不需要手动订阅。