Javascript 在角度中更改模型后如何更新视图？

如何让Angular传播我对模型所做的更改。在AngularJS中，这真的很容易，但我似乎无法让它在AngularJS中工作。我知道整个变化检测系统和视图传播都完全改变了。不知何故，我需要通知angular这些变化。但我如何在实践中做到这一点呢

请参阅这段typescript代码：

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);

import{Component，View，bootstrap，For}来自'angular2/angular2'；
//注释部分
@组成部分({
选择器：“应用程序”
})
@看法({
模板：`
{{user}}
`,
指令：[用于]
})
类应用程序{
用户：阵列；
构造函数（）{
this.users=[]；
this.fillUsersAsync（）；
}
fillUsersAsync（）{
窗口['fetch']（'http://jsonplaceholder.typicode.com/users')
.then（resp=>resp.json（））
.then（users=>users.forEach（user=>this.users.push（user.name）））
.然后（（）=>console.log（'检索用户并将其放在模型上：'，this.users））；
}
}
引导（App）；

您将看到，在用户加载到模型中之后，视图不会更新

我使用的是SystemJS0.16，angular 2.0.0-alpha.23

---

（目前，仅在chrome中有效，因为使用了新的“fetch”api）

要在AngularJS2中更新视图中的数据，应使用表单。你可以在这里阅读或查看更多详细信息。 如果我正确理解表单，您应该修改yout@View部分，如下所示：

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

@View({
模板：`
{{user}}
`,
指令：[用于]
})

--已编辑

试试这个：

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);

import{Component，View，bootstrap，For}来自'angular2/angular2'；
//注释部分
@组成部分({
选择器：“应用程序”
})
@看法({
模板：`
{{user.value}}
`,
指令：[用于，表格]
})
类应用程序{
用户：阵列；
构造函数（）{
this.users=新控件（[]）；
this.fillUsersAsync（）；
}
fillUsersAsync（）{
窗口['fetch']（'http://jsonplaceholder.typicode.com/users')
.then（resp=>resp.json（））
。然后（用户=>
var usersArr=[]
users.forEach（user=>
usersArr.push（user.name））
this.users=新控件（usersArr））；
}
}
引导（App）；

我不确定我的答案是否完全正确，但我找不到更多的信息。用这段代码做实验，愿原力与你同在！：）

我还发现，信息量很大

据我所知，在构造函数中，您应该通过

新控件（一些数据）

初始化您的

用户

变量，然后，在视图模板中，您可以像这样访问此数据-

{{users.value}

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

---

并且将有助于在ng2中取消表单的接收。

Ng前缀又回来了<对于Angular2版本的alpha-24+，用于的代码现在已变为ngFor

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

然后在模板中使用

*ng for=#user of users“

---

签出或

我发现了问题。显然，这是alpha 27中需要修复的错误。请参阅此错误报告：

Angular2使用zonejs知道何时开始摘要周期（脏检查和更新视图）。到目前为止，在使用新窗口获取数据后不会触发zonejs。fetch（）

将窗口['fetch']行替换为该行修复了我的问题：

Zone.bindPromiseFn（窗口['fetch']）（'http://jsonplaceholder.typicode.com/users）

刚才在这里回答了

基本上，Beta 2.0.0-Beta.1中有一个bug

---

希望有帮助！

您的第二个链接似乎让我走上了正确的道路，但文档似乎过时了。我想我需要在指令数组中使用某种形式的指令，但名称是什么，以及如何导入它？@nicojs建议按照第一个链接的示例进行操作，如果它不起作用，请使用第二个。指令名称对于

表单

-指令：[forms]或[forms]。像导入[for]一样导入它指令。请尝试这个并报告，我试图帮助你更多。我尝试了所有方法，但都不起作用。我认为我们看错了方向。据我所知，angular2仍然使用脏检查来查看模型是否更改。不知何故，我需要通知angular2我更新了模型。或者使用$http等效工具。我认为我们错过了一些东西。。。它必须与[控制]一起工作语句。我在几分钟内编辑了我的答案。请检查它。问题不在于，它工作正常。这就是我指定使用alpha-22的原因。但在angular2评估视图时，用户数组仍然为空。问题是，在获取完成后，angular2没有被通知模型中的更改。到目前为止我知道，盎格鲁2不使用Objut.Vistor，但仍然使用脏检查来检查变化。因此它不知道视图中的变化。在角1。x中，您将使用$HTTP，甚至$Apple。是否有一个角2等价物？用alpha代码，您可能需要考虑坚持最新版本，以避免更多的bug和不完整。功能。在Angular2中没有$apply，也没有必要，视图应该根据模型进行更新。您可以使用ng2中的任何请求方法而不是$http。请参阅Angular2的创建者。好的，不需要$apply。但是必须有某种方法通知更改检测我的更改。它不会轮询，也不会使用Object.observe.那么如何解决这个问题呢？实际上有：

\ngZone.run（）

。请参阅