在 Angular 中更改模型后如何更新视图？

Question

如何让 Angular 传播我对模型所做的更改。在 AngularJS 中这真的很容易，但我似乎无法在 Angular 中让它工作。我知道整个变化检测系统和视图传播完全改变了。不知何故，我需要将更改通知 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，angular 2.0.0-alpha.23。

See this plnkr for the example（目前，仅适用于 chrome，因为使用了新的 'fetch' api）

Answer 1

要在 AngularJS2 的视图中更新数据，您应该使用 Forms。您可以在 page or see more details 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 2

NG 前缀回来了。对于 Angular2 版本 alpha-24+，For 现在变成了 ngFor。

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

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

查看 ngFor docs or a working example

Answer 3

我发现了问题。显然，这是一个要在 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')

Answer 4

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

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

希望对您有所帮助！

在 Angular 中更改模型后如何更新视图？

How to update the view after changing the model in Angular?

javascript

typescript

angular