单击角度按钮时如何更改 gridster2 选项值

Question

这是代码和输出：https://stackblitz.com/edit/d3-angular-gridster2-working-axhc7u ?file=src%2Fapp%2Fgrid%2Fgrid.component.html网格HTML<gridster [options]="options">  <gridster-item [item]="item" *ngFor="let item of dashboard">     </gridster-item></gridster>网格-TSngOnInit() {  @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，然后“ ”的值为enableEmptyCellDragtrue 。我已经尝试过这个：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（我必须承认我不知道这是什么）认识到这个变化。

所以你有两个问题：

1. 当您处于 时ngOnChanges，@Input()直接访问您将为您提供“旧”值。

2. 通常，为了让 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();

    }

  }

我还建议创建一个如下所示的类，这将防止您被迫检查这些选项是否存在（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();

  }