Esta instantánea contiene una vista de tablero con cuadrículas de gráficos dinámicos formadas usando un config json en Angular 2 [para cuadrículas usamos angular2-grids y para gráficos chartjs]. Como puede ver, estas ventanas emergentes tienen un botón de configuración colocado en la parte superior rodeado en la imagen. Esto es necesario para que el usuario pueda editar la configuración del gráfico según su conveniencia. Estas cuadrículas se forman usando *ngFor después de obtener la configuración de la cuadrícula y el gráfico de la base de datos y el botón de configuración llama a un método dashboard.component como openSeetingPop(grid.config); aquí están los códigos de mi dashboard.component.html
<div *ngFor="let box of boxes; let i = index" [(ngGridItem)]="box.config" (onItemChange)="updateItem(i, $event)" (onResizeStop)="onResizeStop(i, $event)" (onDragStop)="onDragStop(i, $event)"> <div class="handle">Widget {{box.id}} <div class="box-header-btns pull-right"> <a title="Setting" class="pointer" (click)="openSettingPopUp(box.config);"> <i class="glyphicon glyphicon-cog"></i> </a> <a title="Full Screen" class="pointer"> <i class="glyphicon glyphicon-fullscreen"></i> </a> <a title="Remove widget" (click)="removeWidget(i);" class="pointer"> <i class="glyphicon glyphicon-trash"></i> </a> </div> <app-bar [chartConfig]="topFiveFastMoversConfig" *ngIf="box.chart =='<fast-movers>'"></app-bar> <app-bar-slow-movers [slowChartConfig]="topFiveSlowMoversConfig" *ngIf="box.chart =='<slow-movers>'"></app-bar-slow-movers> <app-cards [snapShotConfig]="inventorySnapshotsConfig" *ngIf="box.chart =='<inventory-quantification>'"></app-cards> <app-goal-turns-per-year [turnsPerYearConfig]="turnsPerYearConfig" *ngIf="box.chart =='<goal-turns-year>'"></app-goal-turns-per-year> <app-days-on-shelf [daysOnShelfConfig]="daysOnShelfConfig" *ngIf="box.chart =='<days-on-shelf>'"></app-days-on-shelf> <bar-chart *ngIf="box.chart =='<most-profitable>'"></bar-chart> </div> </div>tablero.componente.ts
openSettingPopUp(item):void{ console.log("chart config"); console.dir(item); }Ahora quiero vincular ese config json en un modal generado dinámicamente para dar el formulario de actualización de configuración, pero lo único es que el formulario será dinámico dependiendo del valor de configuración diferente para diferentes gráficos.
No puedo descubrir cómo vincular dinámicamente el json de configuración al formulario de actualización y en cualquier cambio en el elemento del formulario cómo actualizar el json de configuración.
Cuadrículas de gráficos dinámicos en el tablero con maniquí de requisitos emergentes dinámicos
Aquí está mi sugerencia. En la plantilla del componente, cree un div modal y hágalo oculto.
<div id="modal-form" [hidden]="!showModal"> <div>{{currenItem.property1}}</div> <div>{{currenItem.property2}}</div> ... </div>En componente.ts:
showModel: boolean = false; currentItem: any; openSettingPopUp(item):void { this.currentItem = item; this.showModal = true; $('#modal-form').dialog({modal: true}); }