在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（目前仅适用于 chrome，因为使用了新的 'fetch' api）

Answer 1

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

Angular2 使用 zonejs 知道何时开始摘要循环（脏检查和更新视图）。到目前为止，zonejs在使用new window.fetch()获取数据后没有被触发。

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

Answer 2

要在 AngularJS2 中更新视图中的数据，您应该使用 Forms。您可以在page 阅读有关此内容的信息或查看更多详细信息here。 如果我正确理解表单，您应该像这样修改 @View 部分：

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

--已编辑

试试这个：

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，非常信息丰富。

据我了解，在构造函数中，您应该通过 new Control(some data) 初始化 users 变量，然后在视图模板中，您可以像这样访问这些数据 - {{users.value}}。

如果它不起作用：尝试相同但非常简单的数据，例如使用字符串而不是数组。

this video 将有助于理解 ng2 中的表单。

Answer 3

刚刚在这里回复Angular2 View Not Changing After Data Is Updated

基本上，Beta 2.0.0-beta.1 中有一个错误。

希望对你有帮助！

Answer 4

Ng 前缀又回来了。 For 现在已变为 ngFor 用于 Angular2 版本 alpha-24+。

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

然后在模板中使用*ng-for=#user of users"。

查看ngFor docs 或a working example