Как обновить представление после изменения модели в Angular?

Как я могу позволить угловому распространению изменений, которые я сделал для модели. В AngularJS это было бы очень легко, но я не могу заставить его работать в Angular. Я знаю, что вся система обнаружения изменений и распространение вида полностью изменены. Так или иначе, мне нужно сообщить angular об изменениях. Но как я могу сделать это на практике.

см. этот фрагмент кода typescript:

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

вы увидите, что после загрузки пользователей в модель представление не обновление.

Я использую systemjs 0.16, angular 2.0.0-alpha.23.

см. этот plnkr для примера (в настоящее время работает только в chrome, так как используется новый api "fetch")

9
angular javascript typescript

4 ответов

Я нашел проблему. По-видимому, его ошибка будет исправлена в alpha 27. См. этот отчет об ошибке:https://github.com/angular/angular/issues/1913

Angular2 использует zonejs, чтобы знать, когда начинать цикл дайджеста (грязная проверка и обновление представления). На данный момент zonejs не запускается после извлечения данных в новом окне.привести.)(

замена строки window ['fetch'] на эту Исправлена проблема для меня: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

2

чтобы обновить данные при просмотре в AngularJS2, вы должны использовать формы. Вы можете прочитать об этом на этом страница или посмотреть подробнее здесь. Если я правильно понимаю формы, вы должны изменить yout @View часть такой:

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

-- edited

попробуйте это:

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

Я не уверен, что мой ответ полностью правильный, но я не могу найти больше информации. Поэкспериментируйте с этим кодом и да пребудет с тобой Сила! :)

также я нашел этой ссылке, очень познавательно.

как я понимаю, когда в конструкторе вы должны инициализировать ь users переменной через new Control(some data) и затем, в view template вы можете получить доступ к этим данным, как это -{{users.value}}.

если это не работает: попробуйте то же самое, но с очень простых данных, например, использовать строку вместо массива.

и видео помогает unserstand форм в нг2.

1

просто ответил на вот это Angular2 Вид Не Меняется После Обновления Данных

в основном, была ошибка в бета-версии 2.0.0-beta.1.

надеюсь, что это помогает!

0

НГ-префиксы обратно. For стала ngFor для Angular2 версий alpha-24+.

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

затем использовать *ng-for=#user of users" в шаблоне.

оформить заказ ngFor docs или пример работающего

-2