Angular 2异步管道不会自动呈现/更新Observable数据

我试图渲染一个RxJs Observable,数据不会自动渲染.

必须单击链接以获取要呈现的数据的路径.

这是根应用程序：

import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent,[HTTP_PROVIDERS,ROUTER_PROVIDERS]);

这是根组件：

import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',providers: [AppService,FirstComponent,SecondComponent],directives: [FirstComponent,SecondComponent,ROUTER_DIRECTIVES],template: `<h1>An Angular 2 App</h1>
               <a [routerLink]="['First']">first-default</a> 
               <a [routerLink]="['Second']">second</a> 
               <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/',name: 'First',component: FirstComponent,useAsDefault: true},{path: '/second',name: 'Second',component: SecondComponent}
])
export class AppComponent {
}

这是第一个组成部分：

import {Component} from "angular2/core";
import {AppService} from "./app.services.ts";
import "rxjs/Rx";


@Component({
    selector: 'my-first',template: `
<div>
    <ul>
        <li *ngFor="#s of appService.someObservable$| async">
           a string: {{ s }}
        </li>
    </ul>
 </div>`
})
export class FirstComponent {

    constructor(private appService:AppService) {
        console.log('constructor','first');
    }
}

最后是服务(数据所在的位置)：

import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Rx";

@Injectable()
export class AppService {

    constructor() {
        console.log('constructor','appService');
        this.constructSomeObservable();
    }

    someObservable$:Observable <string[]>;

    constructSomeObservable() {
        this.someObservable$= Observable.create(observer => {
                const eventSource = new EventSource('/interval-sse-observable');
                eventSource.onmessage = x => observer.next(JSON.parse(x.data));
                eventSource.onerror = x => observer.error(console.log('EventSource failed'));
                return () => {
                    eventSource.close();
                };
            })
            .startWith([])
            .scan((acc,value) => acc.concat(value));
    }
}

我在路由器或管道上出了什么问题？

请参阅github here上的示例项目.

编辑：这是组件的修改版本：

import {Component} from "angular2/core";
import {AppService} from "./app.services.ts";
import {Observable} from "rxjs/Rx";


@Component({
    selector: 'my-first',template: `
<div>
    <ul>
        <li *ngFor="#s of someObservable$| async">
           a string: {{ s }}
        </li>
    </ul>
 </div>`
})
export class FirstComponent {

    someObservable$:Observable <string[]>;

    constructor(private appService:AppService) {
        console.log('constructor','first');
        this.someObservable$= appService.someObservable$;
    }
}

数据未在模板中更新.它与两个/单向绑定有关吗？