2017-01-02 9 views
1

私は何かについて混乱しています。私はリアクションプログラミングの基本であると想定しています。Angular2はプロパティの代わりにobservable関数をバインドします

例#1は機能しますが、例#2はひどく失敗します。

例1:

コンポーネント

export class AppComponent { 
    weeklyCount: Observable<number>[]; 

    constructor(private service: MyService) { 
    this.weeklyCount = [service.getCountByDay("12/18/2016"),service.getCountByDay("12/28/2016")]; 
    } 

テンプレート

<ul> 
    <li class="text" *ngFor="let count of weeklyCount "> 
    {{ count | async }} 
    </li> 
</ul> 

例2

コンポーネント

export class AppComponent { 

    constructor(private service: MyService) { 
    } 

    thisWeeksCount(): Observable<number>[] { 
    var a = this.service.getCountByDay("12/18/2016"); 
    var b = this.service.getCountByDay("12/28/2016"); 
    return [a,b]; 
    } 

テンプレート

<ul> 
    <li class="text" *ngFor="let count of thisWeeksCount()"> 
    {{ count | async }} 
    </li> 
</ul> 

私はサービスのカバーの下にAngularFire2を使用していますが、サービスはrxjsの観測を返しています。

編集:「恐ろしいことに」=ページは結果を返さず、殺されるまで応答しなくなり、メモリは増え続ける。これは受け入れられた答えに基づいて意味をなさない。

+0

どのように失敗しますか? –

答えて

3

私は、あなたが「恐ろしく失敗」によって何を意味するのか分からないが、これらの二つは同じではありません。

  1. は後でテンプレートに反復される2つの観測を持つ配列を作成します。

  2. 変更検出でこの式が変更されたかどうかを確認する必要があるたびに、Observablesで新しい配列を作成します。これは、thisWeeksCount()メソッドが非常に多くのObservableを作成し、おそらくAngularFire2データベースへの要求が多いということを意味します。

おそらく最初のオプションを使用します。

+0

ああ、変化検出がこのメソッドで実行されているからです。ありがとう! –

関連する問題