2017-04-17 12 views
0

ビューを更新したくないというわけではありません。なぜなら(オブジェクトがNG外で更新されているため)、期待していないときになぜそれが更新されるのか分かりません。角度2の更新表示しない場合の表示

OK。

私はこの単純なコードがあります。

@Injectable() 
export class MySignalRService 
{ 
    makeDummyDb:Promise<Array<number>>() 
    { 
     return new Promise((v,x)=> { 
     setTimeout(function(){v([100,200,300]);},800); 
     }) 
    } 

    go(arr : Array<number>) : number 
    { 
    this.makeDummyDb().then((newValues)=>arr.push(...newValues)) ; 
    return 5; //this method must return a number 
    } 
} 

- 私はボタンをクリックすると(は、「詳細を入力します。あなたは私にもサービスを注入しています見ることができるように

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <input type='button' value="Fill more" (click)="fillMore()"/> 
    <ul> 
     <li *ngFor="let item of Items "> 
     {{item}} 
     </li> 
    </ul> 
    </div> 
    `, 
}) 
export class App { 

    Items:Array<number> = new Array<number>(); 

    constructor(private mySignalRService:MySignalRService) 
    { 
    this.Items.push(...[1,2,3]); //initial values 
    } 

    fillMore() 
    { 
    this.mySignalRService.go(this.Items); 
    } 
} 

を"ボタン)、I do添付の項目を参照してください。私はそれを考えると、makeDummyDb:Promiseが角度の範囲外にあると信じているため更新することはできませんでした。(私はここで間違っているかもしれません)

質問:

が配列のアップデートではなかった角度の範囲外を発生しますか?コードが機能しないように実際の外部ゾーンをどのようにシミュレートできますか?あなたの概念はsetTimeoutを約束またはゾーン「外」になるということであれば

Plnkr

+0

はzone.js http://stackoverflow.com/questions/43121400/run-ngrx-effect-outside-ofの外で何かを実行するために、このに見て-angular-zone-to-prevent-timeout-in-protractor – intekhab

答えて

2

(テスト用に)、それはそれがどのように動作するかではありません。 Angular 2 hijacks setTimeoutとsetInterval(TypeScriptを使用するときはHTMLElementではなくIE要素であるquerySelectorから返され、キャストは「スタイル」のようなものにアクセスするよう強制されますが、これはそうではありませんTS/Angular2ではいくつかのことが少し違っているかもしれないことを指摘しています)。タイムアウトが発生するたびに、変更検出が行われます。私が見る限りでは、それがあなたの価値が定着している理由です。私のすべてがゾーン内にあります。あなたはそれを避けるためにいくつかの明白な措置をとらなければなりませ

その周りの作業の小さな例:

ngZone.runOutsideAngular(() => 
    Observable.interval(2500).subscribe(() => { 
     // async operation 
}); 
+0

これで、単純なテスト方法で「外部」ゾーンをシミュレートするにはどうすればよいですか? –

+0

回避策の例を掲載しました。あなたはチェックアウトすることができます(そこにはたくさんのドキュメントがありますが、一緒に引っ張るのは難しいかもしれません)https://christianliebel.com/2016/11/angular-2-protractor-timeout-heres-fix/ –

関連する問題