2016-05-01 2 views
0

Ich habe dieses Stück Code in meinem angular2 Projekt:Winkel 2 Variable nicht definiert

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.

Antwort

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

+0

Könnten Sie eine Erklärung über das, was ist der Unterschied zwischen 'function()' und '() => '? Ich kann keinen finden. Vielen Dank. –

+0

Auf dieser Seite https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this finden Sie eine ausführliche Erklärung dieser Funktion – yurzui