如何在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.

请参阅此plnkr示例(目前仅适用于chrome,因为使用了新的' fetch'api)

Answer 1

我发现了这个问题。显然，这是一个需要在 alpha 27 中修复的错误。请参阅此错误报告： https: //github.com/angular/angular/issues/1913

Angular2 使用 zonejs 来知道何时开始摘要周期（脏检查和更新视图）。截至目前，使用新的 window.fetch() 获取数据后不会触发 zonejs。

将 window['fetch'] 行替换为此解决了我的问题： Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')