각도2 - TypeScript : AppComponent에서 시간 초과 후 숫자 증가

각도2 - TypeScript : AppComponent에서 시간 초과 후 숫자 증가

간단한 것을 만들고 싶다.Angular2응용 프로그램 사용TypeScript간단해 보이지만, 내가 원하는 것을 이룰 수 없다.

템플릿에 속성 값을 표시하려고 함.그리고 setTimeout을 사용하여 1초 후에 업데이트하고 싶다.

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자바스크립트에서 우리가 했던 것과 같은 범위에 있다.만약 내가 틀리지 않았다면, 우리는 TypeScript에서도 순수한 자바스크립트를 사용할 수 있다.

노력까지 했다.

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

그러나 그 가치를 알 수 없다.n콘솔에

내가 시도했을 때

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

나는 위와 같은 실수를 하고 있다.왜 우리가 이 장소에 접근할 수 없는 거지?그런 것 같다.thisJavaScript와 같은 현재 컨텍스트를 참조한다.

미리 고맙다.

유효한 TypeScript 코드가 아니다.수업의 본문에는 메서드 호출이 있을 수 없다.

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

대신 이동하십시오.setTimeout를 부르다constructor동급의또한 화살표 기능을 사용하십시오.=>에 접근하다this.

export class AppComponent {
  public n: number = 1;

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

}

TypeScript에서 다음을 통해 클래스 속성 또는 메서드만 참조할 수 있음this. 그래서 화살표 기능=>중요하다.

당신은 당신의 처리를 클래스 생성자 또는안에 넣어야 한다.OnInit후크 방식

참조URL: https://stackoverflow.com/questions/34529557/angular2-typescript-increment-a-number-after-timeout-in-appcomponent