Angular2 + CKEditor - наблюдаемые изменения

Question

Нет проблем с наблюдаемыми изменениями, но с подключением к нему с помощью [(ngModel)].

Код:

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'main', 
    template: ` 

    <textarea [(ngModel)]="comment" name="editor1" id="editor1"></textarea> 
    <div *ngIf="comment"> 
    {{comment}} 
    </div> 
    ` 
}) 

export class MainComponent { 

    ngOnInit(){ 
    //this.editor = window['CKEDITOR']['replace']('editor1'); 
    window['CKEDITOR']['replace']('editor1')['on']('change', function(evt) { 
     this.comment = evt.editor.getData(); 
     console.log('comment = ' + this.comment); 
    }) 
    } 

    comment: any = "default"; 
} 

Таким образом, по умолчанию при загрузке страницы

<div *ngIf="comment"> 
    {{comment}} 
    </div> 

Angular2 печатает "по умолчанию" текст - правильный. Проблема в том, когда я редактирую текст в ckeditor. Затем есть текст «по умолчанию», но в консоли:

console.log('comment = ' + this.comment); 

текст просматривается правильно. Так в чем проблема? Почему {{комментарий}} видят только начальную версию переменной «комментарий»? Как это исправить? Спасибо за помощь.

Answer 1

попытаться запустить его внутри зоны:

export class MainComponent { 
    constructor(private zone:NgZone){} 
    ngOnInit(){ 
    //this.editor = window['CKEDITOR']['replace']('editor1'); 
    window['CKEDITOR']['replace']('editor1')['on']('change', function(evt) { 
     this.zone.run(function(){ 
     this.comment = evt.editor.getData(); 
     console.log('comment = ' + this.comment); 
     }); 

    }) 
    } 

    comment: any = "default"; 
}