首頁(yè) 猿問(wèn) 單擊角度按鈕時(shí)如何更改...

單擊角度按鈕時(shí)如何更改 gridster2 選項(xiàng)值

JavaScript

DIEA 2023-07-06 19:54:25

這是代碼和輸出：https://stackblitz.com/edit/d3-angular-gridster2-working-axhc7u ?file=src%2Fapp%2Fgrid%2Fgrid.component.html網(wǎng)格HTML<gridster [options]="options"> <gridster-item [item]="item" *ngFor="let item of dashboard"> </gridster-item></gridster>網(wǎng)格-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 。我已經(jīng)嘗試過(guò)這個(gè)：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秒到達(dá)戰(zhàn)場(chǎng)

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果我理解正確的話，你想設(shè)置this.options['enableEmptyCellDrag']為的值@Input() editing。

你想讓 gridster2（我必須承認(rèn)我不知道這是什么）認(rèn)識(shí)到這個(gè)變化。

所以你有兩個(gè)問(wèn)題：

當(dāng)您處于時(shí)ngOnChanges，@Input()直接訪問(wèn)您將為您提供“舊”值。
通常，為了讓 Angular 檢測(cè)對(duì)象的變化，您需要更改對(duì)象的引用。

這就是你ngOnChanges應(yīng)該的樣子。

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

};

}

當(dāng)然我還沒(méi)有測(cè)試過(guò)，但希望對(duì)你有幫助

反對(duì) 回復(fù) 2023-07-06

拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

恕我直言，我找到了一個(gè)更優(yōu)雅的解決方案。

GridsterConfig 對(duì)象有一個(gè) api.optionsChanged 子對(duì)象，它是一個(gè)函數(shù)。如果你運(yùn)行它，它也會(huì)告訴 Gridster 選項(xiàng)發(fā)生變化，而不必本質(zhì)上重新實(shí)例化對(duì)象（無(wú)論如何，它可能只是運(yùn)行這個(gè)函數(shù)）。看起來(lái)更安全、更優(yōu)雅。

因此，您的更改現(xiàn)在可以如下所示：

ngOnChanges(changes: SimpleChanges) {

if (changes.editing && changes.editing.currentValue) {

this.options.enableEmptyCellDrag = changes.editing.currentValue;

this.options.api.optionsChanged();

}

我還建議創(chuàng)建一個(gè)如下所示的類，這將防止您被迫檢查這些選項(xiàng)是否存在（if 語(yǔ)句只是檢查是否定義了 GridsterConfig 接口可選選項(xiàng)...所以如果您定義了它們提前沒(méi)有必要這樣做...不知道為什么 Gridster 使存在可選...恕我直言，選項(xiàng)應(yīng)該始終存在，但可以設(shè)置為 null 或默認(rèn)值）。

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) => {};

}

然后，您的更改現(xiàn)在可以如下所示：

ngOnChanges(changes: SimpleChanges) {

this.options.enableEmptyCellDrag = changes.editing.currentValue;

this.options.api.optionsChanged();

}

反對(duì) 回復(fù) 2023-07-06

2 回答
0 關(guān)注
234 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

單擊角度按鈕時(shí)如何更改 gridster2 選項(xiàng)值

單擊角度按鈕時(shí)如何更改 gridster2 選項(xiàng)值

2 回答

添加回答