如何在静态函数中调整大小/更改时将 gridster-item 保存在数据库中？

Question

在我的仪表板上执行了一些 resize/drag 操作后，我想将更改后的小部件的更新大小和位置保存在我的 MongoDB 数据库中。幸运的是，gridster 库可以对可拖动和调整大小的事件做出反应。但不幸的是它们是静态的，所以当我想使用我的数据库服务保存新值时，它不起作用，因为它不是静态的，所以不能使用它。

我使用了 Angular 6 和 angular-gridster2 6.0.10.

有人知道如何使用 resize/drag 事件来保存我的数据吗？

下面是代码（无法运行，因为我减少了很多）：

export class SheetContentComponent implements OnInit {

  constructor(protected databaseService: DatabaseService,
              private dataService: DataService,
              protected projectService: ProjectService) {
  }

  protected widgetType = WidgetType;
  protected project: Project;
  protected currentDashboardId: string;
  protected user: User;
  protected currentSheetId: string;
  protected widgetPosition: GridsterItem;
  protected currentWidgetId: string;

  protected dashboard: Array<GridsterItem>;

  ngOnInit(): void {

    this.options = {
 gridType: GridType.Fit,
      displayGrid: DisplayGrid.Always,
      compactType: CompactType.None,
      margin: 10,
      outerMargin: true,
      minCols: 50,
      maxCols: 200,
      minRows: 50,
      maxRows: 100,
      pushItems: true,
      pushDirections: {north: true, east: true, south: true, west: true},
      pushResizeItems: true,
      swap: true,
      draggable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("dragable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      },
      resizable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("resizeable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      }
    };
  }

  

  /**
   * This method saves the selected options into the database.
   * @param widgetId the id of the widget to save
   * @param value the value
   * @param field the field where to store
   */
  protected saveInDatabase(widgetId: string, value, field: string): void {
    this.databaseService.updateDocument(this.databaseService.WIDGETSCOLLECTION, widgetId, new Fieldvalue(field, value))
      .subscribe(result => {
      }, error => {
        console.log('Error updating database entry ', error);
      });
  }

<gridster  #dashboardgrid [options]="options" class="widget-container" >
  <gridster-item *ngFor="let widget of list" id="widget.id" [id]="widget.id" [item]="widget.position" class="gridster-    design" (mouseup)="enablePointer(widget.id)">
    <!-->more html stuff<-->
  </gridster-item>
</gridster>

我收到这个错误：

Answer 1

this 定义为调用这些函数时的当前 window 实例您需要将函数更改为箭头函数或绑定到 this。在将回调函数定义为 function () {... 的任何地方执行此操作。示例：

draggable: {
    enabled: true,
    stop: (event, $element, widget) => {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }
  }

draggable: {
    enabled: true,
    stop: function (event, $element, widget) {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }.bind(this)
  }

如何在静态函数中调整大小/更改时将 gridster-item 保存在数据库中？

How to save gridster-item in Database on Resize / Change in a static function?

draggable

resizable

typescript

angular

angular-gridster2