单击角度按钮时如何更改 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>

网格-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，然后“ ”的值为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（我必须承认我不知道这是什么）认识到这个变化。所以你有两个问题：当您处于 时ngOnChanges，@Input()直接访问您将为您提供“旧”值。通常，为了让 Angular 检测对象的变化，您需要更改对象的引用。这就是你ngOnChanges应该的样子。ngOnChanges(changes: SimpleChanges) {&nbsp; &nbsp; if (changes.editing && changes.editing.currentValue) {&nbsp; &nbsp; &nbsp; // Solve problem 1)&nbsp; &nbsp; &nbsp; const newValueOfEditingInput = changes.editing.currentValue;&nbsp; &nbsp; &nbsp; // Solve Problem 2) - Create a new reference for this.options, so that angular (grister2) can detect the change&nbsp; &nbsp; &nbsp; this.options = {&nbsp; &nbsp; &nbsp; &nbsp; ...this.options,&nbsp; &nbsp; &nbsp; &nbsp; enableEmptyCellDrag: newValueOfEditingInput&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; }当然我还没有测试过，但希望对你有帮助

Answer 2

恕我直言，我找到了一个更优雅的解决方案。GridsterConfig 对象有一个 api.optionsChanged 子对象，它是一个函数。如果你运行它，它也会告诉 Gridster 选项发生变化，而不必本质上重新实例化对象（无论如何，它可能只是运行这个函数）。看起来更安全、更优雅。因此，您的更改现在可以如下所示：&nbsp; ngOnChanges(changes: SimpleChanges) {&nbsp; &nbsp; if (changes.editing && changes.editing.currentValue) {&nbsp; &nbsp; &nbsp; this.options.enableEmptyCellDrag = changes.editing.currentValue;&nbsp; &nbsp; &nbsp; this.options.api.optionsChanged();&nbsp; &nbsp; }&nbsp; }我还建议创建一个如下所示的类，这将防止您被迫检查这些选项是否存在（if 语句只是检查是否定义了 GridsterConfig 接口可选选项...所以如果您定义了它们提前没有必要这样做...不知道为什么 Gridster 使存在可选...恕我直言，选项应该始终存在，但可以设置为 null 或默认值）。export class DashboardOptions implements GridsterConfig{&nbsp; gridType = GridType.Fit;&nbsp; compactType = CompactType.None;&nbsp; margin = 10;&nbsp; outerMargin = false;&nbsp; outerMarginTop = null;&nbsp; outerMarginRight = null;&nbsp; outerMarginBottom = null;&nbsp; outerMarginLeft = null;&nbsp; useTransformPositioning = true;&nbsp; mobileBreakpoint = 720;&nbsp; minCols = 1;&nbsp; maxCols = 100;&nbsp; minRows = 1;&nbsp; maxRows = 100;&nbsp; maxItemCols = 100;&nbsp; minItemCols = 1;&nbsp; maxItemRows = 100;&nbsp; minItemRows = 1;&nbsp; maxItemArea = 2500;&nbsp; minItemArea = 1;&nbsp; defaultItemCols = 1;&nbsp; defaultItemRows = 1;&nbsp; fixedColWidth = 105;&nbsp; fixedRowHeight = 105;&nbsp; keepFixedHeightInMobile = false;&nbsp; keepFixedWidthInMobile = false;&nbsp; scrollSensitivity = 10;&nbsp; scrollSpeed = 20;&nbsp; enableEmptyCellClick = false;&nbsp; enableEmptyCellContextMenu = false;&nbsp; enableEmptyCellDrop = false;&nbsp; enableEmptyCellDrag = false;&nbsp; enableOccupiedCellDrop = false;&nbsp; emptyCellDragMaxCols = 50;&nbsp; emptyCellDragMaxRows = 50;&nbsp; ignoreMarginInRow = false;&nbsp; public draggable = {&nbsp; &nbsp; enabled: false,&nbsp; &nbsp; delayStart: 200,&nbsp; &nbsp; start: () => {},&nbsp; &nbsp; stop: () => {}&nbsp; };&nbsp; public resizable = {&nbsp; &nbsp; enabled: true,&nbsp; &nbsp; delayStart: 200,&nbsp; &nbsp; start: () => {},&nbsp; &nbsp; stop: () => {}&nbsp; };&nbsp; swap = false;&nbsp; pushItems = true;&nbsp; disablePushOnDrag = false;&nbsp; disablePushOnResize = false;&nbsp; pushDirections = {north: true, east: true, south: true, west: true};&nbsp; pushResizeItems = false;&nbsp; displayGrid = DisplayGrid.Always;&nbsp; disableWindowResize = false;&nbsp; disableWarnings = false;&nbsp; scrollToNewItems = false;&nbsp; api = {&nbsp; &nbsp; resize: () => {},&nbsp; &nbsp; optionsChanged: () => {},&nbsp; };&nbsp; itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {};}然后，您的更改现在可以如下所示：&nbsp; ngOnChanges(changes: SimpleChanges) {&nbsp; &nbsp; &nbsp; this.options.enableEmptyCellDrag = changes.editing.currentValue;&nbsp; &nbsp; &nbsp; this.options.api.optionsChanged();&nbsp; }