угловой 2 переменная не определена

Question

У меня есть этот кусок кода в моем angular2 проекте:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, AfterViewInit} from 'angular2/core'; 
import {DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: '<aInsertTable></aInsertTable>', 
    templateUrl: './app/templates/insertTable/insertTable.html', 
    directives: [DROPDOWN_DIRECTIVES], 
}) 
export class InsertTableComponent implements AfterViewInit { 
    public status:{isopen:boolean} = {isopen: false}; 
    public sel: any; 
    public rng: any; 

    ngAfterViewInit(){ 
     jQuery('#editable-area').keyup(function(){ 
      this.sel = window.getSelection(); 
      this.rng = this.sel.getRangeAt(0); 
     }) 
     jQuery('#editable-area').mouseup(function(){ 
      this.sel = window.getSelection(); 
      this.rng = this.sel.getRangeAt(0); 
      console.log(this.sel); 
      console.log(this.rng); 
     }) 
    } 

    public toggleDropdown($event:MouseEvent):void { 
     this.status.isopen = !this.status.isopen; 
    } 

    insertTable(x, y) { 
     console.log(this.sel); 
     console.log(this.rng); 
     if (!$tableId) { 
      var $tableId = 0; 
     } 

     var table = document.createElement("Table"); 
     table.id = "table" + $tableId; 
     table.className = "dynamic-table table"; 
     $tableId++; 

     for (var i = 0; i < y + 1; i++) { 
      var tr = document.createElement('tr'); 
      for (var j = 0; j < x + 1; j++) { 
       var td = document.createElement('td'); 
       tr.appendChild(td); 
      }; 
      table.appendChild(tr); 
     }; 

     this.rng.insertNode(table); 
    } 
} 

Теперь вот проблема:

, когда я нажимаю или тип в редактируемой области, я вижу sel и rng, поэтому они устанавливаются, но они кажутся доступными только для области действия ngAfterViewInit, когда я пытаюсь вставить таблицу. Я получаю как sel, так и rng как неопределенные. Может кто-нибудь помочь мне понять, что я делаю неправильно? Спасибо.

Answer 1

Вы должны использовать функцию стрелки в вашем KeyUp и MouseUp обратных вызовов как этого

jQuery('#editable-area').keyup(() => { 
    this.sel = window.getSelection(); 
    this.rng = this.sel.getRangeAt(0); 
}) 

jQuery('#editable-area').mouseup(() => { 
    this.sel = window.getSelection(); 
    this.rng = this.sel.getRangeAt(0); 
    console.log(this.sel); 
    console.log(this.rng); 
}) 

Смотрите также https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this