在 Angular 2 中鼠标悬停之前，组件变量更改不会在视图中更新

Question

从 angular2-alpha 更新到最新版本后，布尔值的更改不会更新 *ngIf，直到执行某些操作。

这是有问题的组件：

declare var CKEDITOR: any;
export class FieldComponent {

 @Input() field: any = {};
 ckeditor: any;
 editable: boolean = false;

 constructor(){

  this.switchToUnEditable();

  this.listenForEvent("FieldEditableEvent", (data) => {
    this.switchToEditable();
  });

 }

 switchToEditable(){
  this.ckeditor.destroy();
  this.ckeditor = CKEDITOR.replace(this.field.id);
  this.editable = true;
 }

switchToUnEditable() {
  if(this.ckeditor) {
   this.ckeditor.destroy();
  }
  this.ckeditor = CKEDITOR.replace(this.field.id, {
   toolbar: []
  })
  this.editable = false;
 }



}

这里是这个组件的模板：

<div *ngIf="editable" class="green-background white-text unlocked">
  This field is unlocked!
  <button (click)="switchToUnEditable()"> 
   Save and close. 
  </button>
</div>
<div *ngIf="!editable" class="red-background white-text locked">
  This field is locked!
</div>
<textarea [attr.name]="field.id" [(ngModel)]="field.value">  
</textarea>

这在更新之前工作得很好 - 现在我必须将鼠标悬停在 div 内的按钮上才能在视图中应用 *ngIf。

或者，我可以在组件树的更上层执行一个事件，并且 *ngIf 也将在该点应用。例如，打开侧边导航会将视图从 locked 更改为 unlocked。

这是 Angular 中预期的正确更改检测吗 2 - 如果是，我如何让用户知道该字段已锁定或 在执行更新视图的事件之前解锁。

Answer 1

似乎对 switchToEditable() 和 switchToUnEditable() 的调用是在 Angulars 区域之外进行的。

如果您显式调用更改检测，它应该可以工作：

constructor(private cdRef:ChangeDetectorRef) {}

switchToEditable(){
  this.editable = true;
  this.cdRef.detectChanges();
}

switchToUnEditable() {
  ...
  this.editable = false;
  this.cdRef.detectChanges();
}

在 Angular 2 中鼠标悬停之前，组件变量更改不会在视图中更新

Component variable change not updated in view until mouseover in Angular 2

javascript

ckeditor

angular