我想我会创建一个非常简单的登录表单,其中包含组件绑定的用户名和密码属性,这些属性将通过以下步骤运行:
- 使用 fetch() 调用提交凭据
- THEN获取Response结果对象的JSON内容
- 然后检查该内容以获取服务器端检查的结果
如果凭据错误,它将更改一个组件属性,该属性会告诉 Angular 将一个类应用于用户名和密码输入以使它们暂时变为红色(使用 setTimeout 将其改回)
我遇到的问题是 Angular 无法正确应用该类,我不知道为什么。我决定创建一个简化的测试项目来缩小问题范围,最终导致包含 system-polyfills/when.js。
此代码依次经过 1、2、3,并将其设置在组件属性中并将其输出到调试控制台。Angular 会正确渲染组件属性,除非包含 system-polyfill,在这种情况下,它将停止在 1 并且永远不会将其更改为 2 或 3,即使控制台显示该属性实际上已更改:
export class App {
private stateIndicator:string = "0";
public showState(state:string) {
console.log('State: ' + state);
this.stateIndicator = state;
}
public showFetchProblem() {
this.showState('1')
fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => {
this.showState('2')
response.text().then((value) => {
this.showState('3')
});
});
}
}
我创建了以下 Plunker 来演示这种行为: http ://plnkr.co/edit/GR9U9fTctmkSGsPTySAI?p=preview
是的,显而易见的解决方案是:
- 不要手动包含系统填充物,或
- 如果需要,在 SystemJS 之前手动包含不同的 Promise polyfill
但我仍然很好奇为什么会发生这种情况,希望有人能对此有所了解(并可能有助于解决基本问题)。
编辑:这个的原标题是Why is Angular 2's template rendering misbehaving when using system-polyfills (when.js)
。感谢 Thierry 和 Günter 的贡献并指出 Angular 2 对区域的使用在这里发挥了作用。对于将来遇到这种情况的任何人,这里有两篇优秀的文章,它们更详细地解释了区域,并且在您遇到这种情况时将增强您对这种情况的理解: