I have a HomeComponent:
@Component({
selector: 'gridster-general',
templateUrl: './home.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
this is the export class, it contains an initialization of a gridster dashboard:
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);
}
},...
I used HomeComponent.prototype
because i couldn't access the dataService variable with this.dataService
I am trying to get the widget's position in angular 5 gridster and save it in my database.
data Service is the service that interacts with my database and UpdateXY()
is a function that uses the post method to save the info in the database.
I am getting this error :
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)
Can someone please help me solve this issue
Solved it, instead of ;
stop:
function (event, $element, widget) {
this.widget = {
x:$element.$item.x,
y:$element.$item.y
}
HomeComponent.prototype.dataService.UpdateXY(this.widget);
}
the right format was:
stop: (event, $element, widget) => {
this.widget = {
x:$element.$item.x,
y:$element.$item.y
}
this.dataService.UpdateXY(this.widget);}