Verwenden von jQuery mit Angular-CLI-Projekt

Question

Ich verwende "@angular/cli": "1.0.2" und angular version 4.

Aus irgendeinem Grund musste ich jquery-basierte Plugin für select area verwenden, weil ich nicht gleichwertige Plugin in eckigen finden konnte. Diese

ist, wie meine Komponente sieht aus wie

declare var $ : any; 
//adding only necessary code 
export class SelectComponent implements OnInit { 

    constructor(private _ngZone: NgZone) {} 

    public rowData: any = []; 

    ngOnInit() { 
     $('img#example').selectAreas({ 
      minSize: [10, 10], 
      onChanged: this.debugQtyAreas, 
      width: 500, 
      areas: [{ 
       x: 10, 
       y: 20, 
       width: 60, 
       height: 100, 
      }] 
     }); 
    } 
    debugQtyAreas(event, id, areas) { 
     this.rowData = areas.map(function(obj) { 
      return { 
       left: obj.x, 
       top: obj.y, 
       id: obj.id 
      }; 
     }); 
    }; 
} 

einige, wie auf diese Weise meine Jquery, was ich arbeiten bin in der Lage Bereiche auszuwählen, auf einem Bild.

Aber der Wert I drängen bin/Zuweisen Array rowData aktualisieren nicht in der Ansicht

Ich habe versucht, im Internet suchen und fanden diese Lösung für alle arbeiten, aber nicht für mich

this._ngZone.run(() => { 
     //running code inside this 
}) 

Aber ich bin immer hier Fehler als

Kann nicht Eigentum ‚run‘ undefinierter

lesen

Die gleiche Sache mit rowData passiert, als ich versuchte, Daten zu schieben, anstatt sie aus der Karte zuweisen wie folgt

for(var i = 0; i < areas.length; i++){ 
    this.rowData.push({ 
     left: areas[i].x, 
     top: areas[i].y, 
     id: obj.id 
    }); 
} 

Es sagt nicht Eigentum ‚Push‘ von undefined

Answer 1

Sie benötigen Kann lesen Verwenden Sie bind, wenn Sie eine Funktion als Referenz übergeben, wenn Sie die this Referenz beibehalten möchten.

onChanged: this.debugQtyAreas.bind(this) 

Wenn Sie Inline-Funktionen mit Typoskript sind writting verwenden Sie nicht die function Präfix. Wenn Sie die => Schreibweise verwenden, wird die this Referenz standardmäßig beibehalten.

this.rowData = areas.map((obj) => { 
     return { 
      left: obj.x, 
      top: obj.y, 
      id: obj.id 
     }; 
    });  

Answer 2

this wird innerhalb jQuery Funktionen reserviert und ist nicht auf den globalen Bereich verwiesen, da es in der Regel ist.

Ich füge immer diese Zeilen an der Spitze meiner Funktion:

let scope = this;

Und dann verwenden scope statt this`, z.B.

scope._ngZone.run(() => { 
    //running code inside this 
}) 

... 

for(var i = 0; i < areas.length; i++){ 
    scope.rowData.push({ 
     left: areas[i].x, 
     top: areas[i].y, 
     id: obj.id 
    }); 
}