Angular 2：聚焦输入导致’表达式在更改后出现’更改’错误

在我的Angular 2应用程序中,我想要一个输入列表.在其中一个内部按Enter将添加一个新输入并立即关注它.这是一个已在本网站和 Eric Martinez provided a neat answer to it that accomplishes that with a custom directive上提出的问题.

他的解决方案基于一个整数的虚拟列表.我在努力使其适应更现实的情况时遇到了困难.我已经分叉了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();
  }
}