Javascript 在Angular CLI项目中使用jQuery

我正在使用

“@angular/cli”：“1.0.2”

和

angular版本4

出于某种原因，我不得不使用基于jquery的插件，因为我在angular中找不到等效的插件

这就是我的组件的外观

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

但我在这里得到了错误作为

无法读取未定义的属性“run”

rowData也发生了同样的事情，当我尝试推送数据而不是像下面这样从map分配数据时

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

for（变量i=0；i

它表示无法读取未定义的属性“push”

---

如果要持久化

此

引用，则在通过引用传递函数时需要使用

bind

onChanged: this.debugQtyAreas.bind(this)

使用TypeScript编写内联函数时，不要使用

函数

前缀。如果使用

=>

表示法，默认情况下，

此

引用将保持不变

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

---

此

在

jQuery

函数中保留，并且不像通常那样引用全局范围

我总是在函数顶部添加以下行：

let scope=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
    });
}

scope.\u ngZone.run（（）=>{
//在这里面运行代码
})
...
对于（变量i=0；i
您是否从“@angular/core”导入了
NgZone
？
import{NgZone}这个？是的。显示完整的代码。我相信我知道为什么。该死的范围问题。有帮助。谢谢。你能告诉我为什么我的自动重新加载在注入jquery后停止工作吗。在它工作之前。@Rakeschand尝试注入ChangeDetectorRef并在您从jQuery回调中更改了某些内容后调用detectChanges（）。您可能还必须从ngZone.run内部调用该方法。我想你有部分解决办法。ngZone.run有误导性，因为它只允许您在区域更新时运行代码。好的，谢谢。我试试看。