Angular2 - TypeScript：AppComponentでタイムアウト後に数値をインクリメントする

Question

TypeScriptを使用して簡単にAngular2アプリケーションを作成したいと思います。かなりシンプルだが、私が望むものを達成することはできない。

テンプレートにプロパティ値を表示したいとします。そして、setTimeoutを使って1秒後に同じものを更新したいと思います。

Plunkrコードはここにある：Code on Plunkr

私が書いたもの

はここにある：私はことはできませんよ、なぜ

Uncaught SyntaxError: Unexpected token ; 

：私はこのコードを使用すると

import {Component} from 'angular2/core'; 

interface Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    template:`<h1>Number Increment</h1><p>{{n}}</p>` 
}) 
export class AppComponent { 
    public n : number = 1; 
    setTimeout(function() { 
    n = n + 10; 
    }, 1000); 
}  

私は、次のエラーを取得していますnにアクセスします。これはJavaScriptで使用したのと同じスコープです。私が間違っていなければ、TypeScriptでも純粋なJavaScriptを使うことができます。

私も

export class AppComponent { 
    public n : number = 1; 
    console.log(n); 
} 

を試してみました。しかし、私は、コンソールにnの値を見ることができないです。

私は

export class AppComponent { 
    public n : number = 1; 
    console.log(this); 
} 

を試したとき、私は上記と同じエラーを取得しています。なぜ私たちはこの場所でこれにアクセスできないのですか？私は、thisはJavaScriptのように現在のコンテキストを参照していると思います。

ありがとうございます。

Answer 1

これは有効なタイスクリプトコードではありません。あるクラスの本体にメソッド呼び出しを行うことはできません。

export class AppComponent { 
    public n: number = 1; 
    setTimeout(function() { 
    n = n + 10; 
    }, 1000); 
} 

代わりに、クラスのコンストラクタにのsetTimeoutコールを移動します。

export class AppComponent { 
    public n: number = 1; 

    constructor() { 
    setTimeout(() => { 
     this.n = this.n + 10; 
    }, 1000); 
    } 

} 

また、活字体であなただけのこのを経由して、クラスのプロパティやメソッドを参照することができます。

Answer 2

処理をクラスコンストラクタまたはOnInitフックメソッドに配置する必要があります。