Question

我的Angular2应用程序中有对象数组。当新对象到达时，我使用SignalR填充数组。现在重点是当新对象到达时我有错误

无法读取未定义的属性

我认为它可能是错误的，因为它的工作异步并且在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之间的区别是什么，因为您在模板代码中使用了奇怪的混合。使用异步管道或“手动”订阅。 Async管道为您订阅，不应与subscribe一起使用。

简短的例子，首次使用异步管道：

服务：

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

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

events: Observable<Event[]>;

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

在HTML中，我们使用async管道为我们订阅：

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

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

这会将我们带到异步数据，因此如果您使用subscribe，则应该初始化数组，并且可能需要使用 safe navigation operator ，或者如果您需要， *ngIf，在您的模板中，除非events中有数据，否则不会呈现模板的该部分。但我更喜欢安全导航操作员;）

希望这有所帮助并做出一些澄清：）

Answer 2

我认为这就是你要找的东西。

AsyncPipe接受Promise或Observable作为输入并自动订阅输入，最终返回发出的值。

Angular.io - AsyncPipe

可观察的<array> Angular2

2 个答案: