大佬教程收集整理的这篇文章主要介绍了Angular 2:聚焦输入导致’表达式在更改后出现’更改’错误,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
他的解决方案基于一个整数的虚拟列表.我在努力使其适应更现实的情况时遇到了困难.我已经分叉了Eric的插件,所以你可以run the code here,但最重要的文件就是这个:
//our root app component import {Component,Directive,Renderer,ElementRef} from 'angular2/core' class Person { name: string } @Directive({ selector : 'input' }) class MyInput { constructor(public renderer: Renderer,public elementRef: ElementRef) {} // It won't work at construction time ngOnInit() { this.renderer.invokeElementMethod( this.elementRef.nativeElement,'focus',[]); } } @Component({ selector: 'my-app',providers: [],template: ` <div *ngFor="#input of inputs"> <input (keydown.enter)="add()" [(ngModel)]="input.name" type="text"/> </div> `,directives: [MyInput] }) export class App { inputs: Person[] = [{name: 'Alice'}]; add() { var newPerson = new Person(); newPerson.name = 'Bob'; this.inputs.push(newPerson); } }
我的输入数组现在是Person对象的列表.输入双向绑定到Person的name属性. <输入>现在包含在< div>中,因为我希望稍后我会写更多标记来显示每个Person.
进行这些更改后,该示例仅在第一次按Enter键时起作用 – 带有文本Bob的新输入按预期显示.但是当我第二次尝试按Enter时,我收到一个错误:
angular2.dev.js:23730 Error: Expression 'ngClassUntouched in App@2:6' has changed after it was checked. PrevIoUs value: 'true'. Current value: 'false' at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor] (angular2.dev.js:7587) at new ExpressionChangedAfterItHasBeenCheckedException (angular2.dev.js:4992) at ChangeDetector_App_1.AbstractChangeDetector.throwOnChangeError (angular2.dev.js:9989) at ChangeDetector_App_1.detectChangesInRecordsInternal (viewFactory_App:143) at ChangeDetector_App_1.AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:9874) at ChangeDetector_App_1.AbstractChangeDetector.runDetectChanges (angular2.dev.js:9857) at ChangeDetector_App_0.AbstractChangeDetector._detectChangesContentChildren (angular2.dev.js:9930) at ChangeDetector_App_0.AbstractChangeDetector.runDetectChanges (angular2.dev.js:9858) at ChangeDetector_HostApp_0.AbstractChangeDetector._detectChangesInViewChildren (angular2.dev.js:9936) at ChangeDetector_HostApp_0.AbstractChangeDetector.runDetectChanges (angular2.dev.js:9861)
我该如何解决这个问题?
我在Chrome中运行该示例.我发现使用基于Beta 12版Angular2的Eric Martinez的插件来解决这个问题是最容易的,但我现实世界的应用程序中我得到了相同的错误,目前正在使用Angular 2.0.0.
class MyInput { constructor(public renderer: Renderer,public elementRef: ElementRef,private cdRef:ChangeDetectorRef) {} // It won't work at construction time ngOnInit() { this.renderer.invokeElementMethod( this.elementRef.nativeElement,[]); this.cdRef.detectChanges(); } }
以上是大佬教程为你收集整理的Angular 2:聚焦输入导致’表达式在更改后出现’更改’错误全部内容,希望文章能够帮你解决Angular 2:聚焦输入导致’表达式在更改后出现’更改’错误所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。