将Angular2 observable异步绑定到模板的正确方法是什么？

Question

我试图使用服务将Angular2 Http Observable绑定到模板。

import { Component, OnInit } from '@angular/core';
import {SourceService} from "./source.service";
import {Observable} from "rxjs";

@Component({
  selector: 'app-source',
  templateUrl: './source.component.html',
  styleUrls: ['./source.component.css']
})
export class SourceComponent implements OnInit {

  private dtoSources: Observable<SourceFile[]>;

  constructor(public service:SourceService) { }

  ngOnInit() {
    console.log('call ngOninit');
    this.dtoSources = this.service.get()
  }
}

export interface SourceFile {
  id: number;
  locationURL: string;
}

使用以下服务：

import {Injectable} from '@angular/core';
import {Http, Response, Headers} from "@angular/http";
import {Observable} from "rxjs";
import {SourceFile} from "./source.component";

@Injectable()
export class SourceService {
  constructor(private _http: Http) {
  }

  get(): Observable<SourceFile[]> {
    return this._http.get('http://localhost:8080/source', {headers: this.getHeaders()})
    .map((response: Response) => response.json() );
  }

  private getHeaders(){
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
  }
}

使用此模板：

<ul>
    <li *ngFor="let value of dtoSources | async">
{{value.id}} : {{ value.locationURL }}</li>
</ul>

这会出现以下错误。为什么async管道不允许在渲染之前完成调用？

error_handler.js:47EXCEPTION: Error in ./SourceComponent class SourceComponent - inline template:4:8 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.ErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
error_handler.js:49ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.ErrorHandler.handleError @ error_handler.js:49next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
error_handler.js:52ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
error_handler.js:53Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgFor.ngOnChanges (ng_for.js:128)
    at Wrapper_NgFor.detectChangesInInputProps (wrapper.ngfactory.js:45)
    at _View_SourceComponent0.detectChangesInternal (component.ngfactory.js:67)
    at _View_SourceComponent0.AppView.detectChanges (view.js:219)
    at _View_SourceComponent0.DebugAppView.detectChanges (view.js:324)
    at _View_SourceComponent_Host0.AppView.detectViewChildrenChanges (view.js:245)
    at _View_SourceComponent_Host0.detectChangesInternal (host.ngfactory.js:33)
    at _View_SourceComponent_Host0.AppView.detectChanges (view.js:219)
    at _View_SourceComponent_Host0.DebugAppView.detectChanges (view.js:324)
    at _View_AppComponent0.AppView.detectContentChildrenChanges (view.js:237)ErrorHandler.handleError @ error_handler.js:53next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
error_handler.js:56ERROR CONTEXT: