Winkel 2 Variable nicht definiert

Question

Ich habe dieses Stück Code in meinem angular2 Projekt:

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); 
    } 
} 

Nun, hier ist das Problem:

wenn ich auf oder geben Sie den bearbeitbaren Bereich, ich sehe die sel und rng Werte in meiner Konsole, so werden sie gesetzt, aber, sie scheinen nur für die ngAfterViewInit Funktion Bereich vorhanden zu sein, wenn ich versuche, eine Tabelle einfügen Ich bekomme sowohl sel als auch rng als undefined. Kann mir jemand helfen, herauszufinden, was ich falsch mache? Vielen Dank.

Answer 1

Sie benötigen Pfeil Funktion in Ihrem keyup verwenden und mouseup Rückrufe wie diese

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); 
}) 

Siehe auch https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this