angular - 如何在单击按钮时动态/静态加载gridster？

Question

我是角度 gridster2 的新手。我想知道“单击按钮时如何动态和静态地加载网格”的重要代码。例如，我的 UI 页面中有一个名为“选择布局”的按钮，当我选择“4×1”选项时，网格应根据所选选项动态加载。请帮我解决一下这个。我们如何使用 angular 2 来做到这一点？

Answer 1

你可以使用ndc-dynamic包，这是我的实现方式

HTML

<gridster id="dashboard" #dashboard [options]="options" (drop)="onDrop($event)" class="transparent">
   <gridster-item #gridsterItem[item]="item" *ngFor="let item of dashboardArray">
    <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" [ndcDynamicInputs]="item.input"
                    ></ndc-dynamic>
            </gridster-item>
</gridster>

TS

onDrop事件

this.dashboardArray.push({
                    rows: 4,
                    cols: 4,
                    x: 0,
                    y: 0,
                    componentType: DashboardComponentType.Grid,
                    input: {
                        chartId: '',
                        dashboardId: this.dashboardId,
                    },
                    component: GridChartComponent,
                    name: "GridChart"
})