So aktualisieren Sie die Ansicht nach einer änderung das Modell in Eckig?

Wie kann ich Eckige propagieren der änderungen habe ich am Modell. In AngularJS das wäre ja wirklich zu einfach, aber ich kann nicht scheinen, um es zu bekommen arbeiten in Eckig. Ich kenne den gesamten change-detection-system und view-Vermehrung ist völlig verändert. Irgendwie, ich brauche zu informieren, Winkel-änderungen. Aber wie kann ich dies in der Praxis.

Sehen, dieses Stück Typoskript-code:

import {Component, View, bootstrap, For} from 'angular2/angular2';

//Annotation section
@Component({
    selector: 'app'
})
@View({
    template: `
    <div *for="#user of users">
        {{user}}
    </div>
    `,
    directives: [For]
})
class App {
    users:Array<String>;

    constructor() {
        this.users = [];
        this.fillUsersAsync();
    }

    fillUsersAsync(){
        window['fetch']('http://jsonplaceholder.typicode.com/users')
            .then( resp => resp.json())
            .then( users => users.forEach(user => this.users.push(user.name)))
            .then( () => console.log('Retrieved users and put on the model: ', this.users));
    }
}

bootstrap(App);

Werden Sie sehen, dass, nachdem der Benutzer in das Modell geladen, die Ansicht nicht aktualisieren.

Ich bin mit systemjs 0.16, Winkel-2.0.0-alpha.23.

Sehen Sie diese plnkr für das Beispiel (derzeit funktioniert nur in chrome, als die neue 'fetch' - api verwendet wird)

InformationsquelleAutor nicojs | 2015-06-04
  1. 2

    Fand ich das Problem. Anscheinend, es ist ein bug behoben in der alpha-27. Finden Sie in diesem bug-report: https://github.com/angular/angular/issues/1913

    Angular2 verwendet zonejs zu wissen, Wann Sie anfangen die digest-Zyklus (das dirty-checking und die Ansicht aktualisieren). Wie jetzt, zonejs wird nicht ausgelöst, nachdem das abrufen von Daten mit dem neuen Fenster.fetch().

    Austausch der Fenster['Holen'], Zeile, um diese behoben das Problem für mich:
    Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

    InformationsquelleAutor nicojs
  2. 1

    Daten zu aktualisieren auf view in AngularJS2, die Sie verwenden sollten Formen. Lesen Sie dazu an dieser Seite oder sehen Sie mehr details hier.
    Wenn ich verstehen, Formulare richtig, Sie sollten ändern Sie Ihre @View Teil wie dieses:

    @View({
    template: `
    <div *for="#user of users" control="users">
        {{user}}
    </div>
    `,
    directives: [For]
})

    --editiert

    Versuchen Sie dies:

    import {Component, View, bootstrap, For} from 'angular2/angular2';

//Annotation section
@Component({
    selector: 'app'
})
@View({
    template: `
    <div [control]="users" *for="#user of users">
        {{user.value}}
    </div>
    `,
    directives: [For, forms]
})
class App {
    users:Array<String>;

    constructor() {
        this.users = new Control([]);
        this.fillUsersAsync();
    }

    fillUsersAsync(){
        window['fetch']('http://jsonplaceholder.typicode.com/users')
            .then( resp => resp.json())
            .then( users => 
                var usersArr = []
                users.forEach(user => 
                      usersArr.push(user.name))
                this.users = new Control(usersArr));
        }
 }

 bootstrap(App);

    Ich bin nicht sicher, dass meine Antwort völlig korrekt ist, aber ich kann nicht finden, mehr Informationen. Experimentieren Sie mit diesem code und möge die macht mit Euch sein! 🙂

    Außerdem fand ich dieser link, sehr informativ.

    So wie ich das verstehe, wenn im constructor initialisieren Sie users variable über new Control(some data) und dann in view-template können Sie den Zugriff auf diese Daten wie in dieser - {{users.value}}.

    Wenn es nicht klappt: versuchen Sie das gleiche, aber mit sehr einfachen Daten, z.B. die Verwendung von string anstelle eines Arrays.

    Und dieses video wird hilft unserstand Formen in ng2.

    • Ihre zweite link scheint mir auf dem richtigen Weg, aber das Dokument scheint zu sein, out-dated. Ich glaube, ich brauche eine Art von form-Richtlinie in den Richtlinien array, aber was ist der name, und wie um es zu importieren?
    • raten würde zu tun, wie in dem Beispiel von dem ersten link und wenn es nicht funktioniert, gehen Sie wie in der zweiten. Die Richtlinie name für forms - Richtlinien: [Formulare] oder vielleicht [Formen]. Importieren Sie es wie Sie importieren [Für] Richtlinie. Dieses versuchen und Bericht bitte, ich versuche zu helfen, Sie mehr.
    • Ich habe es versucht, aber es funktioniert nicht. Ich denke, wir sind auf der Suche in die falsche Richtung. Soweit ich weiß, angular2 verwendet immer noch schmutzig zu prüfen, wenn das Modell geändert wird. Irgendwie muss ich informieren angular2, dass ich aktualisiert das Modell. Oder verwenden Sie einen $http-äquivalent.
    • Ich denke, dass wir etwas übersehen... es müssen gemeinsam mit dem [control] - Anweisung. Editiere ich meine Antwort in wenigen Minuten. Überprüfen Sie es bitte.
    • bearbeitet, check it out.
    InformationsquelleAutor James Schermann
  3. 0

    Nur beantwortet es hier Angular2 Ansicht Nicht Ändern, Nachdem Die Daten Aktualisiert

    Im Grunde genommen gab es einen bug in der Beta 2.0.0-beta.1.

    Hoffe, es hilft!

    InformationsquelleAutor Alan Wagner
  4. -2

    Ng-Präfixe sind zurück. For geworden ngFor für Angular2 Versionen alpha-24+.

    import {NgFor} from 'angular2/directives';
@View({
  directives: [ngFor]
})

    Dann verwenden *ng-for=#user of users" in der Vorlage.

    Kasse die ngFor docs oder ein funktionierendes Beispiel

    • Das problem ist nicht, ist es korrekt funktioniert. Deshalb habe ich angegeben, dass ich mit alpha-22. Aber zu der Zeit angular2 ist die Bewertung der anzeigen, das Benutzer-array noch leer ist. Das problem ist, dass angular2 ist nicht informiert über die änderungen im Modell nach der der Abruf erfolgt. Soweit ich weiß, angular2 ist nicht mit dem Objekt.beobachten, aber immer noch verwendet, dirty überprüfen, um auf änderungen zu überprüfen. Damit es nicht zu wissen, über die änderungen in der Ansicht. In angular 1.x Sie verwenden, $http, oder sogar $gelten. Gibt es eine angular2 äquivalent?
    • Mit alpha-code, möchten Sie vielleicht zu prüfen, kleben Sie auf die neueste version zu vermeiden, mehr bugs und unvollständigen features. In Angular2 es gibt keine $gelten, noch ist es notwendig, die anzeigen sollten nur aktualisieren, basierend auf dem Modell. Statt $http, können Sie alle request-Methode in ng2. Siehe die Antwort von Winkel-creator.
    • Ok, kein $gelten, erforderlich. Aber es muss ein Weg gefunden werden, zu informieren (change detection) von meinen änderungen. Es wird keine Umfrage für, noch wird es mit dem Objekt.beobachten. Also, wie behebe ich dieses Problem?
    • Es ist tatsächlich: _ngZone.run(). Siehe angular.io/docs/js/latest/api/core/NgZone-class.html
    InformationsquelleAutor shmck
Schreibe einen Kommentar