web-dev-qa-db-ja.com

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

私は最初のangle2アプリケーションを実験として設定しようとしており、最新のベータリリースを使用しています。

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

@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 msのタイムアウトを設定します。ここで、値を「更新されたテキスト」に更新しています。

次に、私のビューmain.component.htmlで私は単に使用します：

{{ test2 }}

ただし、値は「更新されたテキスト」に設定されることはなく、更新部分がヒットされても「初期テキスト」のままになります。 Angular2のチュートリアルに従うと、このソリューションに対する答えが本当に得られません。私がここで何を失っているのか誰かが考えているのだろうかと思っていました。

編集：bootstrap and 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);

main-component.html

{{ test2 }}
javascripttypescriptangularangular2-template
21
Jurgen Welschen

Vladoが言ったように、動作するはずです;-)

angular2-polyfills.jsライブラリをページに含める必要があります。見えません。このファイルは、基本的にzone.jsとreflect-metadataのマッシュアップです。ゾーンは更新の検出の一部になります。

ブライアン・フォードがそれが何であるかを説明するこのビデオを見ることができます： https://www.youtube.com/watch?v=3IqtmUscE_ 。

お役に立てばと思います、ティエリー

9
Thierry Templier

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

@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

6
Vlado Tesanovic

基本的なAngular2セットアップでもバインドされたプロパティへの変更がビューに自動的に反映されないOPに非常に似た問題がありました。この時点では、Angular2 2.0.0-rc.6を使用しています。エラーメッセージはありませんでした。

結局、犯人はes6-promise.jsへの参照であることがわかりました。これは、使用するサードパーティのコンポーネントに「必要」でした。どういうわけか、これは、Angular2チュー​​トリアルのいくつかでrc6で提案されているcore-jsリファレンスを妨害しました。

Es6-promise.jsリファレンスを削除するとすぐに、コンポーネントのプロパティを（Promiseまたはタイムアウトを介して）変更した後、ビューが正しく更新されました。

これがいつか誰かの助けになることを願っています。

4
Ben

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);
    }
}
3
artemisian