Angolare2, visualizzazione non aggiornata dopo variazioni variabili in settimeout

Sto provando a configurare la mia prima applicazione angular2 come esperimento e sto utilizzando l'ultima versione beta.Angolare2, visualizzazione non aggiornata dopo variazioni variabili in settimeout

Sono di fronte a un problema strano in cui la variabile che sto usando nella mia vista non viene aggiornata dopo aver impostato un timeout.

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

    } 
}

Come potete vedere ho un test2 variabile denominata e nel costruttore ho impostato un timeout di 500 ms in cui sto aggiornando il valore su "aggiornato testo".

Poi a mio avviso main.component.html ho semplicemente utilizzare:

{{ test2 }}

Ma il valore non sarà mai essere impostato su "testo aggiornato" e rimane in "testo iniziale" per sempre anche se la parte di aggiornamento è essere colpito. Se seguo il tutorial angular2, non mi danno davvero una risposta a questa soluzione. Mi stavo chiedendo se qualcuno avrebbe avuto un'idea di quello che mi manca qui.

edit: il mio pieno codice che sto usando compreso il bootstrap e html ecc

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

principale component.html

{{ test2 }}

fonte

2015-12-28 Jurgen Welschen

Ho appena ricostruito la tua app angular2 minima, ma ottengo il risultato del testo aggiornato. C'è qualche errore nella console? In caso contrario, puoi dare più codice? Come il tuo 'index.html', 'main.component.html' e dove si avvia l'app – PierreDuc

Questo lo ha risolto per me http://stackoverflow.com/a/41724333/1197775 – juanpastas

Come ha detto Vlado, dovrebbe funzionare ;-)

Penso che la libreria angular2-polyfills.js dovrebbe essere incluso nella pagina. Non riesco a vederlo. Questo file è essenzialmente un mashup di zone.js e reflect-metadata. Le zone prendono parte al rilevamento degli aggiornamenti.

Si potrebbe dare un'occhiata a questo video in cui Bryan Ford spiega di cosa si tratta: https://www.youtube.com/watch?v=3IqtmUscE_U.

Spero che ti aiuta, Thierry

fonte

2015-12-28 11:04:27

Ben individuato, molto probabilmente il problema è – PierreDuc

contento che tu confermi il mio suggerimento, Pierre! ;-) –

E 'stato così! Ma non capisco. sviluppavo con l'alfa alcune versioni indietro e questo avrebbe funzionato fuori dagli schemi. Come mai non includono questo nel pacchetto angular2 di default? –

Che dovrebbe funzionare. Hai altri errori nella console?

@Component({ 
selector: 'my-app', 
template: `<h1>Hello {{title}}</h1>` 
}) 
export class App { 
public title: string = "World"; 
constructor() { 
    setTimeout(() => { 
    this.title = "Brave New World" 
    }, 1000);) 
} 
}

Guardate questa Plunker: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

fonte

2015-12-28 10:59:07

Grazie, nessun errore nella console. Ho aggiornato la mia domanda con il codice completo, noto che stai usando import 'rxjs/Rx'; e io non sono. Non ho potuto vedere questo nel tutorial. C'è una ragione per cui lo fai in questo modo? –

No no, non ne hai bisogno, ho biforcuto il mio altro plunker e se n'è andato ... :(Come ha detto Thierry, includi solo angular2-polyfills.min.js nel tuo index.html –

questo ha funzionato perfettamente per me con angolare 2.0, grazie –

ho avuto un problema molto simile alla PO dove anche in base modifiche di configurazione Angular2 alle proprietà bound non sarebbe riflessa dalla vista automaticamente. A questo punto stiamo utilizzando Angular2 2.0.0-rc.6. Nessun messaggio di errore.

Alla fine ho trovato il colpevole essere un riferimento a es6-promise.js, che era "richiesto" da un componente di terze parti che usiamo. In qualche modo questo ha interferito con il riferimento di core-js che stiamo usando, suggerito da rc6 in alcuni tutorial di Angular2.

Non appena ho eliminato il riferimento es6-promise.js, la vista è stata aggiornata correttamente dopo aver modificato una proprietà sul mio componente (tramite Promise o timeout).

Spero che questo aiuti qualcuno un giorno.

fonte

2016-09-09 08:43:53 Ben

grazie, mi ha salvato un giorno –

In Angular2 (~ 2.1.2) un altro modo per farlo funzionare è attraverso la classe ChangeDetectorRef. Il codice della domanda originale sarebbe il seguente:

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

fonte

2017-01-30 17:39:26 artemisian

Angolare2, visualizzazione non aggiornata dopo variazioni variabili in settimeout

risposta

Problemi correlati