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.
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.
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
.
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