angular - 可观察<数组> 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

您似乎不确定 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。

希望这对您有所帮助并做出一些澄清:)