2016-03-22 9 views
2

[OK]をクリックします。私がAngular2/Typescriptで直面している問題についてもう一度助けてください。Promiseを使用しているときに角2がループしている

/// <reference path="../node_modules/angular2/typings/browser.d.ts" /> 

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'hello-app', 
    template: ` 
     <h1>Foo:{{getFoo("FooBar") | async}}</h1> 
    ` 
}) 
export class HelloApp { 

    getFoo(parameter): Promise<string> { 
    return new Promise((resolve) => resolve(parameter)); 
    } 

} 

bootstrap(HelloApp); 

あなたがこれを実行しようとすると、それは私がそれを殺すまで、私のブラウザタブを凍結、ループに入ります。ここでは

は私の単純化したコードです。

次のコードは正常に動作しますが、私は、パラメータを渡す必要があるので、私がやりたいことはありません...

/// <reference path="../node_modules/angular2/typings/browser.d.ts" /> 

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'hello-app', 
    template: ` 
     <h1>Foo:{{foo | async}}</h1> 
    ` 
}) 
export class HelloApp { 

    foo: Promise<string> = new Promise((resolve) => resolve("foobar")); 

} 

bootstrap(HelloApp); 

任意の手掛かり?前もって感謝します !

答えて

1

これは角度変化検出によって発生します。これは、変更検出サイクルごとにgetFoo("FooBar")を呼び出します。

代わりに、Promiseをフィールドに割り当て、実際の例に示すようにそのフィールドにバインドする必要があります。

+0

anerrに感謝しますが、メソッドにパラメータを追加する必要があるため、フィールドでこれを実現する方法がわかりません – phil

+0

あなたの質問のコードからは分かりません。もっと文脈が必要です。あなたの質問の例から、 'this.foo = getFoo(" FooBar ");をコンストラクタで呼び出すと仮定しますが、それ以上のことはあると思います。 –

+0

私のテンプレートはリストをループしています。しかし、私はコンストラクターで同じリストをループすることで自分の価値を創造しました。少なくともそれは動作します、ありがとう! – phil

0

問題は、getFooへの呼び出しを使用してバインドし、asyncパイプを使用して登録すると約束を何度も作成するという問題です。この動作を回避するには、約束をフィールドに設定して、約束を初期化するためにgetFooメソッドを一度だけ呼び出すようにしてください。

関連する問題