Angular2、settimeoutで変数が変更された後にビューが更新されない

私は最初のangular2アプリケーションを実験としてセットアップしようとしています。最新のベータリリースを使用しています。Angular2、settimeoutで変数が変更された後にビューが更新されない

タイムアウトを設定した後、私のビューで使用している変数が更新されていない、奇妙な問題に直面しています。

@Component({ 
    selector: "my-app", 
    bindings: [] 
}) 

@View({ 
    templateUrl: "templates/main.component.html", 
    styleUrls: ['styles/out/components/main.component.css'] 
}) 

export class MainComponent { 

    public test2 = "initial text"; 

    constructor() { 
     setTimeout(() => { 
      this.test2 = "updated text"; 
     }, 500); 

    } 
}

あなたは私がTEST2と私は、「更新されたテキスト」に値を更新しています500ミリ秒のタイムアウトを設定するコンストラクタでという名前の変数を持って見ることができるように。

その後、私は単純に使用私の見解のmain.component.htmlに：

{{ test2 }}

しかし、値が「更新テキスト」に設定されることはありません、更新部分があるにもかかわらず、いつまでも「最初のテキスト」にとどまりますヒットした。私がangular2チュートリアルに従えば、彼らは私にこの解決策への答えを与えません。誰かが私がここで何が欠けているかのアイデアを持っているのだろうかと思っていました。

編集：私の完全な私は、ブートストラップなど、使用していたコードやHTMLなどのブートストラップと

<html> 
<head> 
    <title>Angular 2</title> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/node_modules/reflect-metadata/reflect.js"></script> 
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 

    <script src="/node_modules/q/q.js"></script> 
    <script src="/node_modules/jquery/dist/jquery.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script src="/bower_components/breeze-client/breeze.debug.js"></script> 
    <script src="/bower_components/datajs/datajs.js"></script> 
    <script src="/bower_components/bootstrap-less/js/collapse.js"></script> 
    <script src="/bower_components/bootstrap-less/js/modal.js"></script> 

    <script src="/bower_components/signalr/jquery.signalR.js"></script> 
    <script src="http://localhost:64371/signalr/js"></script> 

    <link href="styles/out/main.css" type="text/css" rel="stylesheet" /> 
    <script> 
     System.config({ 
      map: { 
       rxjs: '/node_modules/rxjs' // added this map section 
      }, 
      packages: {'scripts/out': {defaultExtension: 'js'}, 'rxjs': {defaultExtension: 'js'}} 
     }); 

     System.import('scripts/out/main'); 

    </script> 
</head> 
<body> 
    <my-app>loading...</my-app> 
</body> 
</html>

main.ts：

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 
import {COMMON_DIRECTIVES} from './constants'; 
import {MainComponent} from './components/main.component' 
bootstrap(MainComponent);

メインcomponent.html

{{ test2 }}

出典

2015-12-28 Jurgen Welschen

私はちょうどあなたの最小angle2アプリを再構築しましたが、私は更新されたテキスト結果を取得します。コンソールにエラーはありますか？そうでない場合は、より多くのコードを提供できますか？あなたの 'index.html'、' main.component.html'、どこでアプリケーションをブートストラップするのですか？ – PierreDuc

これは私のために解決されましたhttp://stackoverflow.com/a/41724333/1197775 – juanpastas

ヴラドはそれが私がangular2-polyfills.jsライブラリがあなたのページに含まれるべきだと思います;-)

を動作するはずです、言ったように。私はそれを見ることができません。このファイルは本質的にzone.jsとreflect-metadataのマッシュアップです。ゾーンが更新の検出に含まれます。

ブライアン・フォードが説明しているとおり、このビデオを見ることができます：https://www.youtube.com/watch?v=3IqtmUscE_U。

は私もバウンドプロパティへの基本的なAngular2設定の変更に自動的にビューに反映されませんOPと非常によく似た問題を抱えていたティエリー

出典

2015-12-28 11:04:27

よく斑点を付けました。これはおそらく問題です – PierreDuc

私の提案を確認することを嬉しく思います、ピエール！;-) –

それでした！しかし、私は理解していません。私はいくつかのバージョンのアルファを使って開発していましたが、これは箱の中で動くでしょう。どのように彼らはデフォルトでangular2パッケージにこれを含めませんでしたか？ –

これでうまくいくはずです。コンソールに他のエラーがありますか？このPlunkerで

@Component({ 
selector: 'my-app', 
template: `<h1>Hello {{title}}</h1>` 
}) 
export class App { 
public title: string = "World"; 
constructor() { 
    setTimeout(() => { 
    this.title = "Brave New World" 
    }, 1000);) 
} 
}

ルック： http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

出典

2015-12-28 10:59:07

ありがとう、コンソールにエラーはありません。私は完全なコードで私の質問を更新した、私はあなたがインポート 'rxjs/Rx'を使用していることを確認します。私はそうではありません。私はチュートリアルでこれを見ることができませんでした。このような理由がありますか？ –

いいえ、あなたはそれを必要としません、私は私の他のプランカをフォークし、それは残しました... :(Thierryが言ったように、angle2-polyfills.min.jsをindex.html –

に入れてください。 2.0、感謝。 –

、それはあなたのお役に立てば幸いです。この時点で、Angular2 2.0.0-rc.6を使用しています。エラーメッセージはありませんでした。

最終的に私たちはes6-promise.jsへの参照になりました。私たちが使用する第三者コンポーネントによって「必須」でした。どういうわけか、これは、Angular2チュートリアルのいくつかでrc6で提案されている、使用しているcore-jsリファレンスを妨害しました。

私はes6-promise.js参照を取り除くとすぐに、プロミスまたはタイムアウトを介してコンポーネントのプロパティを変更した後、ビューが正しく更新されました。

これはいつか誰かに役立つことを願っています。

出典

2016-09-09 08:43:53 Ben

ありがとう、私を1日保存しました –

Angular2（〜2.1.2）では、ChangeDetectorRefクラスを使用する別の方法があります。元の質問コードは次のようになります：

import { 
    ChangeDetectorRef 
    // ... other imports here 
} from '@angular/core'; 

@Component({ 
    selector: "my-app", 
    bindings: [] 
}) 

@View({ 
    templateUrl: "templates/main.component.html", 
    styleUrls: ['styles/out/components/main.component.css'] 
}) 

export class MainComponent { 

    public test2 = "initial text"; 

    constructor(private cd: ChangeDetectorRef) { 
     setTimeout(() => { 
      this.test2 = "updated text"; 

      // as stated by the angular team: the following is required, otherwise the view will not be updated 
      this.cd.markForCheck(); 

     }, 500); 
    } 
}

出典

2017-01-30 17:39:26 artemisian

Angular2、settimeoutで変数が変更された後にビューが更新されない

答えて

関連する問題