版本：^9.3.3
HTML
<button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button>
<button>ADD</button>
<gridster [options]="options">
<gridster-item class="px-3 py-2" [item]="item" *ngFor="let item of dashboard">
</gridster-item>
</gridster>
TS
editing = false;
ngOnInit() {
this.options = {
gridType: GridType.Fit,
margin: 0,
outerMargin: null,
outerMarginTop: null,
outerMarginRight: null,
outerMarginBottom: null,
outerMarginLeft: null,
useTransformPositioning: true,
mobileBreakpoint: 640,
keepFixedHeightInMobile: false,
keepFixedWidthInMobile: false,
scrollSensitivity: 10,
scrollSpeed: 20,
enableEmptyCellClick: this.editing,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: this.editing,
emptyCellDragCallback: this.emptyCellClick.bind(this),
enableOccupiedCellDrop: false,
ignoreMarginInRow: false,
draggable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
resizable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
swap: 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,
itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
window.dispatchEvent(new Event('resize')); // to reisize respective charts
})
};
}
toggleEditing() {
this.editing = !this.editing;
}
ngOnChanges() {
if (this.options && this.editing || this.options && !this.editing) {
this.options['enableEmptyCellClick'] = this.editing;
}
}
emptyCellClick(event: MouseEvent, item: GridsterItem): void {
console.log(`test ${item}`);
}
我在这里要做的是多选网格。但问题是点击不起作用。当我单击空单元格时，它不会在 devtool 中显示控制台。
例如，我单击空单元格，它应该显示控制台，或者当我单击多项选择时，例如第一项和第二项为空，然后我将选择第一项和第二项，然后当我单击添加时，它将从第一项添加，然后第二项就是这样。
至
