primeng p-confirmDialog更改显示的布局
我在angular6上使用了primeng，但是当出现pdialog时，更改了布局并减少了布局，这是我的p-dialog实现
<p-confirmDialog header="Confirmación Eliminar" key="confEliminarBici" [baseZIndex]="999" [autoZIndex]="false" icon="pi pi-exclamation-triangle"
width="425" #cd >
<p-footer>
<button type="button" pButton icon="pi pi-check" label="Aceptar" (click)="cd.accept()"></button>
<button type="button" pButton icon="pi pi-times" label="Cancelar" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
这是我的完整实施方式
<div class="ui-g">
<!-- column -->
<div class="ui-g-12">
<p-panel header="Bicicletas" [style]="{'margin-top':'20px'}">
<form #form="ngForm" (ngSubmit)="form.valid && guardar()">
<div class="ui-g">
<div class="ui-g-12" *ngIf="!editar">
<p-dataView #dv [value]="bicicletas" [paginator]="true" layout="grid" [rows]="5"
paginatorPosition="both" filterBy="codigoBien" [sortField]="sortField" [sortOrder]="sortOrder">
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-6 ui-md-6 filter-container">
<div style="position:relative">
<input type="search" pInputText placeholder="Buscar por codigo de bien"
(keyup)="dv.filter($event.target.value)">
</div>
</div>
<div class="ui-g-6 ui-md-6" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
</div>
</p-header>
<ng-template let-bicicleta pTemplate="listItem">
<div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
<div class="ui-g-12 ui-md-3" style="text-align:center">
<img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicleta.foto}}"
height="200" width="200">
</div>
<div class="ui-g-12 ui-md-8 car-details">
<div class="ui-g">
<div class="ui-g-2 ui-sm-6">Id: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicleta.foto}}</b></div>
<div class="ui-g-2 ui-sm-6">Código: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicleta.codigoBien}}</b></div>
<div class="ui-g-2 ui-sm-6">Descripción: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicleta.descripcion}}</b></div>
<div class="ui-g-2 ui-sm-6">Estado: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicleta.estado}}</b></div>
<div class="ui-g-2 ui-sm-6">Candado: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicleta.candado?.descripcion}}</b></div>
</div>
</div>
<div class="ui-g-12 ui-md-1 search-icon">
<button pButton type="button" icon="pi pi-search" (click)="ver(bicicleta)"
class="ui-button-success"></button>
<button pButton type="button" icon="fa fa-pencil-square-o" (click)="editarBicicleta(bicicleta)"></button>
<button pButton type="button" icon="fa fa-times" class="ui-button-danger"
(click)="confirmarEliminar(bicicleta)"></button>
</div>
</div>
</ng-template>
<ng-template let-bicicleta pTemplate="gridItem">
<div style="padding:.5em" class="ui-g-12 ui-md-3">
<p-panel [header]="bicicleta.codigoBien" [style]="{'text-align':'center'}">
<img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicleta.foto}}"
width="60">
<div class="car-detail">{{bicicleta.descripcion}} -
{{bicicleta.disponibilidad}}</div>
<hr class="ui-widget-content" style="border-top:0">
<button pButton type="button" icon="pi pi-search" class="ui-button-success"
(click)="ver(bicicleta)" style="margin-top:0"></button>
<button pButton type="button" icon="fa fa-pencil-square-o" (click)="editarBicicleta(bicicleta)"></button>
<button pButton type="button" icon="fa fa-times" class="ui-button-danger"
(click)="confirmarEliminar(bicicleta)"></button>
</p-panel>
</div>
</ng-template>
</p-dataView>
</div>
<div class="ui-g-12" *ngIf="editar">
<div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" *ngIf="bicicletaSelecionado!=null">
<div class="ui-grid-row">
<div class="ui-grid-col-2">
{{cols[0].header}} *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" name="codigoBien" [(ngModel)]="bicicletaSelecionado.codigoBien"
required />
</div>
<div class="ui-grid-col-4">
<p-message severity="error" text="Codigo de Bien is requerido" *ngIf="form.submitted && !form.form.controls.codigoBien?.valid"></p-message>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
{{cols[1].header}} *:
</div>
<div class="ui-grid-col-6">
<p-dropdown [options]="estados" [(ngModel)]="bicicletaSelecionado.estado" name="estado"></p-dropdown>
</div>
<div class="ui-grid-col-4">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
{{cols[2].header}} *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" name="descripcion" [(ngModel)]="bicicletaSelecionado.descripcion"
required />
</div>
<div class="ui-grid-col-4">
<p-message severity="error" text="Descripción de Bien is requerido" *ngIf="form.submitted && !form.form.controls.descripcion?.valid"></p-message>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Fotografia *:
</div>
<div class="ui-grid-col-6">
{{bicicletaSelecionado.foto}}
<input name="file" type="file" id="adjuntar" accept="image/*" class="ui-g-12 ui-md-12 ui-lg-12 inputUpload"
(change)="fileChangeEvent($event)" placeholder="Subir Imagen..." />
</div>
<div class="ui-grid-col-4">
<p-message severity="error" text="El campo Fotrográfia es requerido" *ngIf="form.submitted && bicicletaSelecionado.id == null && documento == null"></p-message>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Candado:
</div>
<div class="ui-grid-col-6">
<p-dropdown [options]="candadosItem" [(ngModel)]="bicicletaSelecionado.candadoId"
name="candado"></p-dropdown>
</div>
<div class="ui-grid-col-4">
</div>
</div>
</div>
</div>
<div class="ui-g-12" style="text-align: right">
<button pButton *ngIf="!editar" type="button" icon="pi pi-plus" label="Nuevo" (click)="form.onReset();nuevo()"
class="ui-button-info" style="margin-right: .25em"></button>
<button pButton *ngIf="editar" type="submit" icon="pi pi-save" label="Guardar" class="ui-button-info"
style="margin-right: .25em"></button>
<button pButton *ngIf="editar" type="button" icon="pi pi-times" label="Cancelar" (click)="editar=false"
class="ui-button-info" style="margin-right: .25em"></button>
</div>
</div>
</form>
</p-panel>
</div>
<!-- column -->
</div>
<p-confirmDialog header="Confirmación Eliminar" key="confEliminarBici" [baseZIndex]="999" [autoZIndex]="false" icon="pi pi-exclamation-triangle"
width="425" #cd >
<p-footer>
<button type="button" pButton icon="pi pi-check" label="Aceptar" (click)="cd.accept()"></button>
<button type="button" pButton icon="pi pi-times" label="Cancelar" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
<p-dialog header="Detalle Bicicleta" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" width="750" >
<div class="ui-g" *ngIf="bicicletaSelecionado" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
<!-- <div class="ui-g-12" style="text-align:center">
<img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png">
</div> -->
<div class="ui-g-6 ui-md-6" style="text-align:center">
<img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicletaSelecionado.foto}}" height="200"
width="200">
</div>
<div class="ui-g-6 ui-md-6 car-details">
<div class="ui-g">
<div class="ui-g-6 ui-sm-6">Id: </div>
<div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.foto}}</b></div>
<div class="ui-g-6 ui-sm-6">Código: </div>
<div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.codigoBien}}</b></div>
<div class="ui-g-6 ui-sm-6">Descripción: </div>
<div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.descripcion}}</b></div>
<div class="ui-g-6 ui-sm-6">Estado: </div>
<div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.estado}}</b></div>
<div class="ui-g-2 ui-sm-6">Candado: </div>
<div class="ui-g-10 ui-sm-6"><b>{{bicicletaSelecionado.candado?.descripcion}}</b></div>
</div>
</div>
</div>
</p-dialog>
显示如下：
1 个答案:
答案 0 :(得分：0)
PrimeNG p对话框将根据其中的内容自动将位置设置为屏幕的中心。
因此，打开对话框后，如果您设置了其他任何内容，它将显示在不合适的位置。
<div class="ui-g" *ngIf="bicicletaSelecionado" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
打开导致我猜到该问题的对话框后，此div及其内容将得到更新。
只需在打开对话框之前使该bicicletaSelecionado及其所有参考可用即可。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？