9

如何让 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）

4

4 回答 4

2

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

于 2015-06-11T21:51:58.047 回答
1

要在 AngularJS2 中更新视图中的数据，您应该使用Forms。您可以在此页面上阅读相关内容或在此处查看更多详细信息。如果我正确理解表单，您应该像这样修改@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);

我不确定我的回答是否完全正确，但我找不到更多信息。试用此代码，愿原力与您同在！:)

我也发现了这个链接，非常有用。

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

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

这个视频将有助于理解 ng2 中的表单。

于 2015-06-05T06:11:16.977 回答
0

刚刚在这里回答了Angular2 数据更新后视图不变

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

希望能帮助到你！

于 2016-04-27T13:30:55.840 回答
-2

Ng 前缀又回来了。For现在已成为ngForAngular2 版本 alpha-24+。

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

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

查看ngFor 文档或工作示例

于 2015-06-05T15:24:42.133 回答