Angular-CLIプロジェクトでjQueryを使用する

Question

"@angular/cli": "1.0.2"とangular version 4を使用しています。

なんらかの理由で、select areaにjqueryベースのプラグインを使用しなければならなかったのは、等価なプラグインが見つからないためでした。

これは私のコンポーネントは

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

どのように見えるかをいくつかの方法がこのように私のjqueryの事は、私が画像上の領域を選択することができる午前取り組んでいます。私は、配列rowDataへの割り当て/プッシュしてい

しかし、値がビューに

を更新していない私は、インターネット上で検索を試してみました。このソリューションは皆のためではなく、私のため

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

しかし、私が働いてい

としてここでエラーを取得しています

未定義

のプロパティ「実行」を読み込めません

あなたが必要rowDataで起こって同じこと、私は

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

を次のようにマップからそれを割り当てるのではなく、データをプッシュしようとしたときには、プロパティを読み取ることができませんと言う未定義

Answer 1

の「プッシュ」 this参照を永続化する場合は、参照によって関数を渡すときにbindを使用してください。

onChanged: this.debugQtyAreas.bind(this) 

あなたは活字体でインライン関数を足すいるfunction接頭辞を使用しないでください。 =>表記を使用すると、thisの参照は既定で保持されます。

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

Answer 2

thisjQuery関数内に予約され、それは、通常、グローバルスコープに参照されていないとなります。

私はいつも私の関数の先頭にこの行を追加します。

let scope = this;

そして代わりthis`、例えばのscopeを使用します

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