Angular2, widok nie aktualizuje się po zmianie wartości w rozliczeniu

Próbuję skonfigurować moją pierwszą aplikację kątową2 jako eksperyment i używam najnowszego wydania beta.Angular2, widok nie aktualizuje się po zmianie wartości w rozliczeniu

Mam do czynienia z dziwnym problemem, w którym zmienna używam w moim widoku nie jest aktualizowana po ustawieniu limitu czasu.

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

    } 
}

Jak widać mam zmiennej o nazwie test2 oraz w konstruktorze i ustawić limit czasu 500 ms, gdzie jestem aktualizując wartość „zaktualizowany tekst”.

Wtedy moim zdaniem main.component.html po prostu użyć:

{{ test2 }}

Ale wartość nie zostanie ustawiona na „zaktualizowanym tekstem” i pozostaje na „pierwotnego tekstu” na zawsze, mimo że część aktualizacji bycie trafionym. Jeśli podążę za tutorialem angular2, tak naprawdę nie dali mi odpowiedzi na to rozwiązanie. Zastanawiałam się, czy ktoś nie ma pojęcia, czego tu brakuje.

edit: mój pełny kod używam w tym bootstrap i html itp

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

głównego component.html

{{ test2 }}

Źródło

2015-12-28 Jurgen Welschen

Właśnie przebudowałem Twoją minimalną aplikację kątową2, ale otrzymuję zaktualizowany tekst. Czy jest jakiś błąd w konsoli? Jeśli nie, czy możesz podać więcej kodu? Tak jak twój 'index.html',' main.component.html' i gdzie ładujesz aplikację – PierreDuc

Rozwiązało to dla mnie http://stackoverflow.com/a/41724333/1197775 – juanpastas

Jak powiedział Vlado, to powinno działać ;-)

myślę, że biblioteka angular2-polyfills.js powinny zostać włączone do swojej strony. Nie widzę tego. Ten plik jest w zasadzie plikiem typu zone.js i reflect-metadata. Strefy biorą udział w wykrywaniu aktualizacji.

Możesz obejrzeć ten film wideo, w którym Bryan Ford wyjaśnia, co to jest: https://www.youtube.com/watch?v=3IqtmUscE_U.

Nadzieję, że to pomaga, Thierry

Źródło

2015-12-28 11:04:27

Dobrze zauważony To najprawdopodobniej problem – PierreDuc

Zadowolony, że potwierdzasz moją sugestię, Pierre! ;-) –

To było to! Ale nie rozumiem. Kiedyś rozwijałem się z wersją alpha, a to działało po wyjęciu z pudełka. Jak to możliwe, że nie zawierają tego w pakiecie angular2 domyślnie? –

To powinno zadziałać. Czy masz jakieś inne błędy w konsoli?

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

Spójrz na to Plunker: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

Źródło

2015-12-28 10:59:07

Dziękuję, brak błędów w konsoli. Mam zaktualizowane moje pytanie z pełnym kodem, zauważam, że korzystasz z importu "rxjs/Rx"; i nie jestem. Nie widziałem tego w samouczku. Czy istnieje powód, dla którego robisz to w ten sposób? –

Nie, nie potrzebujesz tego, rozwidłem mój drugi plunker i odszedł ... :(Tak jak powiedział Thierry, po prostu włącz angular2-polyfills.min.js do twojego index.html –

to całkowicie sprawdziło się dla mnie z kątem 2.0, dziękuję –

miałem bardzo podobny problem do PO, gdzie nawet w podstawowej konfiguracji Angular2 do zmian właściwości związanych nie będzie odbitego przez widok automatycznie. W tym momencie używamy Angular2 2.0.0-rc.6. Nie było żadnego komunikatu o błędzie.

Ostatecznie uznałem, że sprawca jest referencją do es6-promise.js, która była "wymagana" przez komponent strony trzeciej, z którego korzystamy. W jakiś sposób przeszkadzało to w używaniu odnośnika core-js, który jest sugerowany przez rc6 w niektórych tutorialach Angular2.

Jak tylko pozbyłem się odnośnika es6-promise.js, widok zaktualizował się poprawnie po zmianie właściwości na moim komponencie (przez Promise lub timeout).

Mam nadzieję, że to komuś pomoże.

Źródło

2016-09-09 08:43:53 Ben

dzięki, zaoszczędzili mi dzień –

In Angular2 (~ 2.1.2) Innym sposobem na jego działanie jest użycie klasy ChangeDetectorRef. Oryginalny kod zapytania wyglądałby tak:

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

Źródło

2017-01-30 17:39:26 artemisian

Angular2, widok nie aktualizuje się po zmianie wartości w rozliczeniu

Odpowiedz

Powiązane problemy