Observable <Array> Angular2

Question

我在我的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[]>; 

我明白错误，但我怎样才能使它现在工作？

Answer 1

我认为这就是你要找的。

The AsyncPipe accepts a Promise or Observable as input and subscribes to the input automatically, eventually returning the emitted values.

Angular.io - AsyncPipe

Answer 2

看来你是不知道什么是async管和subscribe之间的区别，因为你是用你的模板代码一个奇怪的组合。使用异步管道或“手动”订阅。 Async pipe将为您订购，不应与subscribe一起使用。

短简单的例子，异步管道的第一种用法：

服务：

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

在组件，我们分配可观察到我们观察到的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：

在这里，我认为你混合async管与异步检索的数据。因此，async管道不用于异步检索的数据，而是用于订阅Observable。

这给我们带来了异步数据，所以如果你使用subscribe，你应该初始化数组，可能需要使用safe navigation operator或者如果你想，*ngIf，在你的模板不渲染部分除非在events中有数据。但我更喜欢安全的导航操作;）

希望这个帮助，并作出一些澄清:)