Angular 2 - 异常：表达式 'ngClassUntouched 在检查后发生了变化

Question

完整的错误信息是：

angular2.dev.js:23597 EXCEPTION: Expression 'ngClassUntouched in myComponent@7:12' has changed after it was checked. Previous value: 'true'. Current value: 'false' in [ngClassUntouched in MyComponent@7:12]

错误指向此控件：

<input [(ngModel)]="searchTxt" class="searchText" type="text" 
class="form-control" placeholder="Search all departments & sites"
(keypress)="handleKeyboard($event)" [ngClass]="{noBorder: tags.length >     
0}" (keyup)="handleKeyboard($event)" autocomplete="off"/>

基本上，当我执行以下命令将焦点从 searchTxt 更改为动态创建的输入时，这发生在 keyup 事件上：

this.inputs.toArray()[0].nativeElement.focus();

更多详细信息：这是动态创建的输入数组：

<div *ngFor="#item of records?.data">
<input #input name="r{{item.id}}" class="focusInputBox" type="text"/>
</div>

这些输入是以下结果：

@ViewChildren('input') inputs;

有什么建议吗？

很多 !!!

更新： 我注意到 angular 在 searchTxt 上添加了一些 classes：class="form-control searchText ng-untouched ng-valid ng-dirty"

当我设置输入框的焦点时，在 searchTxt 中添加了 ng-untouched raises。

Answer 1

在 setTimeout(...) 中包装 focus() 这是导致 class 一次设置的原因 Angular 预计不会发生变化：

setTimeout(() => {
  this.inputs.toArray()[0].nativeElement.focus();
}, 0);

Answer 2

也许您可以将 ChangeDetectorRef 注入您的组件并调用它的 detectChanges 方法：

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {
  this.cdr.detectChanges();
}

可以在其他地方调用此方法，因为它取决于您加载代码的方式...

Angular 2 - 异常：表达式 'ngClassUntouched 在检查后发生了变化

Angular 2 - EXCEPTION: Expression 'ngClassUntouched has changed after it was checked

angular2-forms

angular