javascript - sirve - Angular2, la vista no se actualiza después de los cambios variables en settimeout
settimeout javascript (4)
Como dijo Vlado, debería funcionar ;-)
Creo que la biblioteca angular2-polyfills.js debería incluirse en su página. No puedo verlo Este archivo es esencialmente un mashup de zone.js y reflect-metadata. Las zonas forman parte de la detección de actualizaciones.
Puede ver este video donde Bryan Ford explica qué es: https://www.youtube.com/watch?v=3IqtmUscE_U .
Espero te ayude, Thierry
Estoy intentando configurar mi primera aplicación angular2 como un experimento y estoy usando la última versión beta.
Estoy enfrentando un problema extraño en el que la variable que estoy usando en mi vista no se actualiza después de establecer un tiempo de espera
@Component({
selector: "my-app",
bindings: []
})
@View({
templateUrl: "templates/main.component.html",
styleUrls: [''styles/out/components/main.component.css'']
})
export class MainComponent {
public test2 = "initial text";
constructor() {
setTimeout(() => {
this.test2 = "updated text";
}, 500);
}
}
Como puede ver, tengo una variable llamada test2 y en el constructor establecí un tiempo de espera de 500 ms en el que actualizo el valor a "texto actualizado".
Luego, en mi opinión main.component.html simplemente uso:
{{ test2 }}
Pero el valor nunca se establecerá en "texto actualizado" y se mantendrá en "texto inicial" para siempre, aunque se esté ejecutando la parte de actualización. Si sigo el tutorial angular2 realmente no me dan una respuesta a esta solución. Me preguntaba si alguien tendría una idea de lo que me estoy perdiendo aquí.
edición: mi código completo que estoy usando, incluyendo el bootstrap y el html, etc.
<html>
<head>
<title>Angular 2</title>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/reflect-metadata/reflect.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/q/q.js"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
<script src="/bower_components/datajs/datajs.js"></script>
<script src="/bower_components/bootstrap-less/js/collapse.js"></script>
<script src="/bower_components/bootstrap-less/js/modal.js"></script>
<script src="/bower_components/signalr/jquery.signalR.js"></script>
<script src="http://localhost:64371/signalr/js"></script>
<link href="styles/out/main.css" type="text/css" rel="stylesheet" />
<script>
System.config({
map: {
rxjs: ''/node_modules/rxjs'' // added this map section
},
packages: {''scripts/out'': {defaultExtension: ''js''}, ''rxjs'': {defaultExtension: ''js''}}
});
System.import(''scripts/out/main'');
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
main.ts con el bootstrap:
import {Component} from ''angular2/core'';
import {bootstrap} from ''angular2/platform/browser''
import {COMMON_DIRECTIVES} from ''./constants'';
import {MainComponent} from ''./components/main.component''
bootstrap(MainComponent);
main-component.html
{{ test2 }}
En Angular2 (~ 2.1.2) otra forma de hacerlo funcionar es a través de la clase ChangeDetectorRef. El código de la pregunta original se vería así:
import {
ChangeDetectorRef
// ... other imports here
} from ''@angular/core'';
@Component({
selector: "my-app",
bindings: []
})
@View({
templateUrl: "templates/main.component.html",
styleUrls: [''styles/out/components/main.component.css'']
})
export class MainComponent {
public test2 = "initial text";
constructor(private cd: ChangeDetectorRef) {
setTimeout(() => {
this.test2 = "updated text";
// as stated by the angular team: the following is required, otherwise the view will not be updated
this.cd.markForCheck();
}, 500);
}
}
Eso debería funcionar. ¿Tienes algún otro error en la consola?
@Component({
selector: ''my-app'',
template: `<h1>Hello {{title}}</h1>`
})
export class App {
public title: string = "World";
constructor() {
setTimeout(() => {
this.title = "Brave New World"
}, 1000);)
}
}
Mira este Plunker: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview
Tuve un problema muy similar al OP, donde incluso en una configuración básica de Angular2 los cambios en las propiedades delimitadas no se reflejaban automáticamente en la vista. En este momento, estamos usando Angular2 2.0.0-rc.6. No hubo mensaje de error.
Al final, encontré que el culpable era una referencia a es6-promise.js, que fue "requerido" por un componente de terceros que usamos. De alguna manera, esto interfirió con la referencia core-js que estamos usando, lo que se sugiere con rc6 en algunos de los tutoriales de Angular2.
Tan pronto como me deshice de la referencia de es6-promise.js, la vista se actualizó correctamente después de cambiar una propiedad en mi componente (a través de Promise o timeout).
Espero que esto ayude a alguien algún día.