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

Question

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

Посмотреть этот кусок кода: машинопись

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, угловой 2.0.0-alpha.23.

See this plnkr for the example (в настоящее время работает только в хроме, так как используется новый «выборки» апи)

Answer 1

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

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

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

Answer 2

Для обновления данных в целях в AngularJS2 следует использовать Формы. Вы можете прочитать об этом на этом page или посмотреть подробности here. Если я понимаю правильно формы, вы должны изменить 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); 

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

Также я нашел this link, очень информативный.

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

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

И this video поможет не выдавать формы в ng2.

Answer 3

Ng-префиксы вернулись. For теперь стал ngFor для версий Angular2 alpha-24 +.

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

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

ngFor docs Извлекает или a working example

Answer 4

Просто ответил здесь Angular2 View Not Changing After Data Is Updated

В принципе, там была ошибка в бета-2.0.0-бета. 1.

Надеюсь, это поможет!