Angular2 - TypeScript: Увеличивает число после таймаута в AppComponent

Question

Я хочу создать простое приложение Angular2 с использованием TypeScript. Кажется, довольно просто, но я не могу достичь того, что хотел.

Я хочу показать значение свойства в шаблоне. И я хочу обновить то же самое через 1 секунду, используя setTimeout.

Plunkr код здесь: Code on Plunkr

То, что я написал здесь:

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

Когда я использую этот код я получаю следующее сообщение об ошибке:

Uncaught SyntaxError: Unexpected token ; 

Почему я не могу для доступа к n, который находится в том же объеме, что и в JavaScript. Если я не ошибаюсь, мы можем использовать чистый JavaScript тоже в TypeScript.

Я даже попытался

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.