Angular2-TypeScript: Incrementa un número después del tiempo de espera en AppComponent


Quiero crear una aplicación simple Angular2 usando TypeScript. Parece, bastante simple, pero no soy capaz de lograr lo que quería.

Quiero mostrar un valor de propiedad en la plantilla. Y quiero actualizar el mismo después de 1 segundo usando setTimeout.

El código de Plunkr está aquí: El código de Plunkr

Lo que escribí está aquí:

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

Cuando uso este código recibo el siguiente error:

Uncaught SyntaxError: Unexpected token ;

Por qué no soy capaz de acceder n, que está en el el mismo alcance que solíamos hacer en JavaScript. Si no me equivoco, también podemos usar JavaScript puro en TypeScript.

Incluso intenté

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

Pero no puedo ver el valor de n en la consola.

Cuando intenté

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

Estoy recibiendo el mismo error que el anterior. Por qué no podemos acceder a esto en este lugar. Supongo que this se refiere al contexto actual como en JavaScript.

Gracias de antemano.

Author: Mahisha, 2015-12-30

2 answers

Este no es un código typescript válido. No puede tener invocaciones de método en el cuerpo de una clase.

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

En su lugar mueva la llamada setTimeouten el constructor de la clase.

export class AppComponent {
  public n: number = 1;

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

}

También en TypeScript puede hacer referencia a las propiedades o métodos de clase solo a través de this.

 71
Author: toskv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-30 15:56:32

Debe poner su procesamiento en el constructor de clase o en un método hook OnInit.

 6
Author: Thierry Templier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-26 12:03:11