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，angular 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知道何时开始摘要周期（脏检查和更新视图）。截至目前，使用新的window.fetch（）获取数据后不会触发zonejs。

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

Answer 2

要在AngularJS2中查看视图中的数据，您应该使用表单。您可以在此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，非常信息丰富。

据我了解，在构造函数中，您应该通过users初始化new Control(some data)变量，然后在视图模板中，您可以访问此类数据 - {{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现已成为Angular2版本alpha-24 +的ngFor。

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

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

结帐ngFor docs或a working example

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

4 个答案: