可观察的< Array>角度2 [英] Observable<Array> Angular2

问题描述

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

I have object array in my Angular2 application. I am using SignalR to fill array when new object arrives. Now the point is when new object arrived I had error

无法读取未定义的属性

cannot read property of undefined

我骑乘它可能是错误的，因为它的工作是异步的，并且在html中，我曾经在对象内部获取对象.

I rode that it might be error because its working async and in html I used to take object inside object.

所以现在的代码如下:

<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仅支持绑定到Iterables(例如数组).

NgFor only supports binding to Iterables such as Arrays.

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

My object array is in component and look as below:

events: Observable<Event[]>;

我了解该错误，但是现在如何使它正常工作?

I understand the error but how can I make it work now?

推荐答案

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

Seems you are not sure about what's the difference between async pipe and subscribe, since you are using an odd mix in your template code. Either use the async pipe or "manually" subscribe. Async pipe does the subscription for you and should not be used together with subscribe.

简短的示例，异步管道的首次使用:

Short simple examples, first usage of async pipe:

服务:

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

在组件中，我们将可观察值分配给可观察的events:

In component, we assign that observable to our observable events:

events: Observable<Event[]>;

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

在HTML中，我们使用async管道为我们执行订阅:

In HTML we use async pipe that does the subscription for us:

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

... Aaa，然后使用subscribe:

...Aaaand then the usage of subscribe:

服务方法相同，不同之处在于组件:

The service method would be the same, the difference is in the component:

events: Event[] = [];

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

HTML:

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

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

Here I think you mixed async pipe with asynchronously retrieved data. So the async pipe is not used for asynchronously retrieved data, but to subscribe to Observable.

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

Hope this helped and made some clarification :)

这篇关于可观察的< Array>角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！