我的 Angular2 应用程序中有对象数组。当新对象到达时,我正在使用 SignalR 来填充数组。现在重点是当新对象到达时我有错误
cannot read property of undefined
我认为这可能是错误的,因为它是异步工作的,在 html 中我曾经将对象放入对象中。
现在代码看起来像这样:
<div *ngFor="let event of events">
<div class="card overview">
<div class="overview-content clearfix ">
<span class="overview-title" pTooltip="{{event.name}}">{{(event | async)?.user?.name}} / {{(event | async)?.date | date:"HH:mm" }}</span>
<span class="overview-badge "> <i class="material-icons ">{{getActivityIcon(event.activityId)}}</i>
<button type="button" pButton (click)="selectEvent($event,event,op);" icon="fa-search"></button>
</span>
</div>
</div>
</div>
现在错误是
NgFor only supports binding to Iterables such as Arrays.
我的对象数组在组件中,如下所示:
events: Observable<Event[]>;
我明白这个错误,但我现在该如何让它工作?
最佳答案
您似乎不确定 async
管道和 subscribe
之间的区别是什么,因为您在模板代码中使用了奇怪的组合。使用异步管道或“手动”订阅。 Async
管道为您完成订阅和取消订阅,不应与 subscribe
一起使用。
简短的示例,异步管道的首次使用:
服务:
getEvents(): Observable<Event[]> {
return this.http.get('url')
.map(res => res.json())
}
在组件中,我们将该可观察对象分配给可观察对象 events$
:
events$ = this.myService.getEvents();
在 HTML 中,我们使用 async
管道为我们进行订阅:
<div *ngFor="let event of events$ | async">
{{event.name}}
</div>
...Aaa然后是subscribe
的用法:
服务方法是一样的,区别在于组件:
events: Event[] = [];
ngOnInit() {
this.myService.getEvents()
.subscribe(data => {
this.events = data;
});
}
HTML:
<div *ngFor="let event of events">
{{event.name}}
</div>
在这里,我认为您将 async
管道与异步检索的数据混合在一起。所以 async
管道不是用于异步检索数据,而是用于订阅和取消订阅 Observable。
希望这对您有所帮助并做出一些澄清:)
关于angular - 可观察<数组> Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42718440/