可观察的<Array> Angular2

Question

我的Angular2应用程序中有对象数组.当新对象到达时,我使用SignalR填充数组.现在关键是当新对象到达时我有错误

无法读取未定义的属性

我骑了它可能是错误,因为它工作async和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仅支持绑定到诸如Arrays之类的Iterables.

我的对象数组在组件中,如下所示:

events: Observable<Event[]>;

我理解错误,但我现在怎样才能使它工作？

Answer 1

似乎你不确定async管道之间的区别是什么subscribe,因为你在模板代码中使用了奇怪的混合.使用异步管道或"手动"订阅.Asyncpipe为您订阅,不应与之一起使用subscribe.

简单的简单示例,首次使用异步管道:

服务:

getEvents(): Observable<Event[]> {
  return this.http.get('url')
    .map(res => res.json())
}

在组件中,我们将observable分配给我们的observable events:

events: Observable<Event[]>;

ngOnInit() {
  this.events = this.myService.getEvents();
}

在HTML中,我们使用async管道为我们订阅:

<div *ngFor="let event of events | async">
  {{event.name}}
</div>

... Aaaand然后使用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.

这将我们带到异步数据,所以如果你使用async,你应该初始化数组,并且可能需要使用安全导航操作符,或者如果你想要的话subscribe,在模板中不渲染模板的那部分,除非有数据Async.但我更喜欢安全的导航操作员;)

希望这有所帮助,并做了一些澄清:)