angular6 - primeng p-confirmDialog 更改显示布局

Question

我在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>

显示如下：

Answer 1

PrimeNG p-dialog 将根据其中的内容自动将位置设置为屏幕中心。

所以打开对话框后，如果您设置任何其他内容，它将看起来不在正确的位置。

<div class="ui-g" *ngIf="bicicletaSelecionado" style="padding: 2em;border-bottom: 1px solid #d9d9d9">

打开导致我猜的问题的对话框后，此 div 及其下方的内容正在更新。

只需bicicletaSelecionado在打开对话框之前使其及其所有参考可用。