6

私は PrimeNG ダイアログ コンポーネントを使用しており、ボタンをクリックすると別のモーダル ダイアログを表示したいモーダル ダイアログがあります。

ボタンに続くダイアログの内容しか表示されないため、2 番目のモーダル ダイアログは実際にはモーダルではありません。

2 番目のモーダル ダイアログの p-dialog の [appendTo] 属性を変更しましたが、正しく動作していないようです。

p-dialog でネストされたダイアログを開くにはどうすればよいですか?

angular 2 コンポーネントでのダイアログ:

<p-dialog header="Create/Edit Financial Flow"  [visible]="display$ | async" modal="modal" width="500" height="600" responsive="true" [resizable]="false" [closable]="false">
<financial-flowdialog #myfinancialflowdialog (onCloseDialog) ="closeDialog()" [flowdata]="selectedFlows$ | async"></financial-flowdialog>
</p-dialog>

最初のモーダル ダイアログ内のボタンをクリックすると、2 番目のダイアログが開きます。ネストされたダイアログの定義の下:

    <p-dialog header="Title" [(visible)]="display" [appendTo]="body" *ngIf="display" modal="modal" width="500" height="600" responsive="true"
        [resizable]="false" [closable]="false">
        <div class="container-fluid">
            <form (ngSubmit)="onSubmit()">

                <div class="pull-right top-buffer ">
                    <button type="button" class="btn btn-primary" (click)="closeDialog()">Cancel</button>
                    <button type="submit" class="btn btn-primary">Select</button>
                </div>
            </form>
        </div>
    </p-dialog>
    <button type="button" #mybtn [value]="value" ngDefaultControl [formControlName]="key" [id]="key" [ngStyle]="style" (click)="openDialog()">{{label}}</button>

最初のダイアログを開くことはできますが、ボタンをクリックして 2 番目のダイアログを開くと、ダイアログの内容が通常の div のように表示されます。レンダリングされた html の下:

<section>
    <div id="nestediag" ng-reflect-form="[object Object]" class="ng-pristine ng-invalid ng-touched">
        <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><p-dialog header="Title" height="600" modal="modal" responsive="true" width="500" ng-reflect-visible="true">
            <div class="container-fluid">
                <form class="ng-untouched ng-pristine ng-valid">

                    <div class="pull-right top-buffer ">
                        <button class="btn btn-primary" type="button">Cancel</button>
                        <button class="btn btn-primary" type="submit">Select</button>
                    </div>
                </form>
            </div>
        </p-dialog>
        <button ngdefaultcontrol="" type="button" value="Select a payee" ng-reflect-name="flowpayee" ng-reflect-ng-style="[object Object]" ng-reflect-value="Select a payee" ng-reflect-id="flowpayee" id="flowpayee" class="ng-pristine ng-valid ng-touched" style="width: 100%;">Select a payee</button>
    </div>
</section>
4

2 に答える 2