TypeError: Cannot read property 'UpdateXY' of undefined at Object.stop anguar 5

Question

我有一个 HomeComponent：

@Component({
  selector: 'gridster-general',
  templateUrl: './home.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})

这是导出 class，它包含 gridster 仪表板的初始化：

export class HomeComponent implements OnInit {

  options: GridsterConfig;
  dashboard: Array<GridsterItem>;
  widget:any;

  constructor(private dataService:DataService ) 
  { }

  ngOnInit() {
    this.options = {
      gridType: GridType.ScrollVertical,
      compactType: CompactType.None,
      margin:10,
      outerMargin: true,
      outerMarginTop: null,
      outerMarginRight: null,
      outerMarginBottom: null,
      outerMarginLeft: null,
      mobileBreakpoint: 640,
      minCols: 1,
      maxCols: 10,
      minRows: 1,
      maxRows: 100,
      maxItemCols: 100,
      minItemCols: 1,
      maxItemRows: 100,
      minItemRows: 1,
      maxItemArea: 2500,
      minItemArea: 1,
      defaultItemCols: 1,
      defaultItemRows: 1,
      fixedColWidth: 105,
      fixedRowHeight: 105,
      keepFixedHeightInMobile: false,
      keepFixedWidthInMobile: false,
      scrollSensitivity: 10,
      scrollSpeed: 20,
      enableEmptyCellClick: false,
      enableEmptyCellContextMenu: false,
      enableEmptyCellDrop: false,
      enableEmptyCellDrag: false,
      emptyCellDragMaxCols: 50,
      emptyCellDragMaxRows: 50,
      ignoreMarginInRow: false,
      draggable: {
        enabled: true,     
        stop:
        function (event, $element, widget) {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
          HomeComponent.prototype.dataService.UpdateXY(this.widget);
        }

      },...

我使用 HomeComponent.prototype 因为我无法使用 this.dataService

访问 dataService 变量

我正在尝试获取小部件在 angular 5 gridster 中的位置并将其保存在我的数据库中。数据服务是与我的数据库交互的服务，UpdateXY() 是一个使用 post 方法将信息保存在数据库中的函数。我收到此错误：

ERROR TypeError: Cannot read property 'UpdateXY' of undefined
    at Object.stop (home.component.ts:106)
    at GridsterDraggable.dragStop (gridsterDraggable.service.ts:158)
    at HTMLDocument.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLDocument.globalZoneAwareCallback (zone.js:1566)

谁能帮我解决这个问题

Answer 1

解决了，而不是;

stop:
        function (event, $element, widget) {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
          HomeComponent.prototype.dataService.UpdateXY(this.widget);
        }

正确的格式是：

 stop: (event, $element, widget) => {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
       this.dataService.UpdateXY(this.widget);}

TypeError: Cannot read property 'UpdateXY' of undefined at Object.stop anguar 5

TypeError: Cannot read property 'UpdateXY' of undefined at Object.stop anguar 5

angular

post

angular5

typeerror

gridster