可觀察的<Array>角2

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 僅支持綁定到可迭代對象，例如數組。

我的對象數組在組件中，如下所示：

events: Observable<Event[]>;

我理解錯誤，但我現在如何使它工作？

Answer 1

似乎您不確定async pipe 和subscribe之間的區別是什么，因為您在模板代碼中使用了奇怪的組合。 使用異步管道或“手動”訂閱。 Async管道為您執行訂閱和取消訂閱，不應與subscribe一起使用。

簡短的簡單示例，異步管道的首次使用：

服務：

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

在組件中，我們將該 observable 分配給我們的 observable 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。

希望這會有所幫助並做出一些澄清:)

Answer 2

我想這就是你要找的。

AsyncPipe 接受 Promise 或 Observable 作為輸入並自動訂閱輸入，最終返回發出的值。

Angular.io - AsyncPipe