单击 angular 中的按钮时如何更改 gridster2 选项值

Question

这是代码和输出：https://stackblitz.com/edit/d3-angular-gridster2-working-axhc7u?file=src%2Fapp%2Fgrid%2Fgrid.component.html

GRID-HTML

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
   
  </gridster-item>
</gridster>

GRID-TS

ngOnInit() {
  @Input() editing: any;
    this.options = {
      gridType: GridType.Fit,
      displayGrid: DisplayGrid.Always,
      enableEmptyCellClick: false,
      enableEmptyCellContextMenu: false,
      enableEmptyCellDrop: false,
      enableEmptyCellDrag: false,
      enableOccupiedCellDrop: false,
      emptyCellClickCallback: this.emptyCellClick.bind(this),
      emptyCellContextMenuCallback: this.emptyCellClick.bind(this),
      emptyCellDropCallback: this.emptyCellClick.bind(this),
      emptyCellDragCallback: this.emptyCellClick.bind(this),
      emptyCellDragMaxCols: 50,
      emptyCellDragMaxRows: 50
    };

    this.dashboard = [
      { cols: 2, rows: 1, y: 0, x: 0 },
      { cols: 2, rows: 2, y: 0, x: 2 },
      { cols: 1, rows: 1, y: 0, x: 4 },
      { cols: 3, rows: 2, y: 1, x: 4 },
      { cols: 1, rows: 1, y: 4, x: 5 },
      { cols: 1, rows: 1, y: 2, x: 1 },
      { cols: 2, rows: 2, y: 5, x: 5 },
      { cols: 2, rows: 2, y: 3, x: 2 },
      { cols: 2, rows: 1, y: 2, x: 2 },
      { cols: 1, rows: 1, y: 3, x: 4 },
      { cols: 1, rows: 1, y: 0, x: 6 }
    ];
  }

我在这里要做的是启用 enableEmptyCellDrag。例如我点击了编辑按钮然后编辑的值是 true 然后 enableEmptyCellDrag 的值是 true.

我已经试过了：

ngOnChanges() {
 ///this.options['enableEmptyCellDrag'] = true // the enableEmptyCellDrag is undefined
 ///if (this.editing) {
 /// this.options['enableEmptyCellDrag'] = true // the value of enableEmptyCellDrag is change to true, but when I try to drag from the empty cell it doesn't work
 ///}

}

Answer 1

如果我没理解错的话，你想把this.options['enableEmptyCellDrag']设为@Input() editing的值。

而你想要 gridster2（我必须承认我不知道这是什么）来识别这个变化。

所以你有两个问题：

当您处于 ngOnChanges 时，直接访问您的 @Input() 将为您提供“旧”值。
通常，为了Angular检测对象的变化，需要改变对象的引用。

这就是您的 ngOnChanges 应该的样子。

  ngOnChanges(changes: SimpleChanges) {
    if (changes.editing && changes.editing.currentValue) {
      // Solve problem 1)
      const newValueOfEditingInput = changes.editing.currentValue;

      // Solve Problem 2) - Create a new reference for this.options, so that angular (grister2) can detect the change
      this.options = {
        ...this.options,
        enableEmptyCellDrag: newValueOfEditingInput
      };
    }
  }

当然我没有测试过这个但我希望它能帮助你

Answer 2

恕我直言，我找到了一个更优雅的解决方案。

GridsterConfig 对象有一个 api.optionsChanged 子对象，它是一个函数。如果你运行它也告诉 Gridster 选项更改而不必，本质上，重新实例化对象（这可能只是运行这个函数）。看起来更安全，更优雅。

因此，您的更改现在看起来像这样：

  ngOnChanges(changes: SimpleChanges) {
    if (changes.editing && changes.editing.currentValue) {
      this.options.enableEmptyCellDrag = changes.editing.currentValue;
      this.options.api.optionsChanged();
    }
  }

我还建议创建一个像下面这样的 class，这样可以防止您被迫检查这些选项是否存在（if 语句只是检查 GridsterConfig 接口可选选项是否存在）已定义...因此，如果您提前定义它们，则无需这样做...不确定为什么 Gridster 使存在成为可选...恕我直言，选项应该始终存在，但可以设置为 null 或默认值）。

export class DashboardOptions implements GridsterConfig{
  gridType = GridType.Fit;
  compactType = CompactType.None;
  margin = 10;
  outerMargin = false;
  outerMarginTop = null;
  outerMarginRight = null;
  outerMarginBottom = null;
  outerMarginLeft = null;
  useTransformPositioning = true;
  mobileBreakpoint = 720;
  minCols = 1;
  maxCols = 100;
  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;
  enableOccupiedCellDrop = false;
  emptyCellDragMaxCols = 50;
  emptyCellDragMaxRows = 50;
  ignoreMarginInRow = false;
  public draggable = {
    enabled: false,
    delayStart: 200,
    start: () => {},
    stop: () => {}
  };
  public resizable = {
    enabled: true,
    delayStart: 200,
    start: () => {},
    stop: () => {}
  };
  swap = false;
  pushItems = true;
  disablePushOnDrag = false;
  disablePushOnResize = false;
  pushDirections = {north: true, east: true, south: true, west: true};
  pushResizeItems = false;
  displayGrid = DisplayGrid.Always;
  disableWindowResize = false;
  disableWarnings = false;
  scrollToNewItems = false;
  api = {
    resize: () => {},
    optionsChanged: () => {},
  };
  itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {};
}

然后，您的更改现在看起来像这样：

  ngOnChanges(changes: SimpleChanges) {
      this.options.enableEmptyCellDrag = changes.editing.currentValue;
      this.options.api.optionsChanged();
  }

单击 angular 中的按钮时如何更改 gridster2 选项值

How to change the gridster2 options value when clicking the button in angular

javascript

typescript

angular

angular-gridster2