单击角度中的按钮时，如何更改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，然后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的值。

你想欺骗2(我必须承认我不知道这是什么(来认识到变化。

所以你有两个问题：

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

我找到了一个更优雅的解决方案IMHO。

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

因此，您的on change现在可以如下所示：

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

我还建议创建一个类，如下所示，这将防止您被迫检查这些选项是否存在(if语句只是检查是否定义了GridsterConfig接口的可选选项…所以如果您提前定义了它们，就没有必要这样做…不确定Gridster为什么将存在设置为可选…IMHO选项应该始终存在，但可以设置为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();
}