首頁猿問單擊角度按鈕時如何更改...

單擊角度按鈕時如何更改 gridster2 選項值

JavaScript

DIEA 2023-07-06 19:54:25

這是代碼和輸出：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 ///}}

查看完整描述

2 回答

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

如果我理解正確的話，你想設置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

};

}

當然我還沒有測試過，但希望對你有幫助

反對回復 2023-07-06

拉風的咖菲貓

TA貢獻1995條經驗獲得超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();

}

反對回復 2023-07-06

2 回答
0 關注
213 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊角度按鈕時如何更改 gridster2 選項值

單擊角度按鈕時如何更改 gridster2 選項值

2 回答

添加回答