弹出 angular 7

Question

我有以下代码，效果很好，当按下按钮时，它会显示一些带有 table 的简单数据，但我希望 table 的所有数据都显示为弹出窗口 window 而不是屏幕的一部分，我怎样才能做得很好？谢谢

<button pButton
        type="button"
        [disabled]="this.data == null"
        icon="pi pi-angle-down"
        (click)='toggleShowTable()'
        iconPos="left"
        label="versions"
        class="ui-button-rounded ui-button-secondary"></button>
<div *ngIf="data">
  
  <p-table *ngIf='showTable' [columns]="cols" [value]="data">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th class="ui-column-title" *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data let-columns="columns">
      <tr>
        <td *ngFor="let col of columns">
          <div class="p-column-text">{{data[col.field]}}</div>
        </td>

      </tr>
    </ng-template>
  </p-table>
</div>

Answer 1

PrimeNG 有支持此功能的对话框：

app.component.html:

<p-dialog 
   [(visible)]="display"
   [showHeader]="false"
   [dismissableMask]="true"
   [modal]="true" 
   [contentStyle]="{'max-height':'200px'}">
   <p> content </p>
</p-dialog>

<button type="button" (click)="showDialog()" icon="pi pi-info-circle" label="Show"></button>

app.component.ts:

export class AppComponent {
    display: boolean = false;

    showDialog() {
        this.display = true;
    }
}

内容可以使用 contentStyle 属性设置样式，Header 可以通过 showHeader 属性隐藏，并且由于 dismissableMask 属性，在对话框外部单击将关闭它。

其他属性可以在优秀的文档中找到：https://www.primefaces.org/primeng-v7-lts/#/dialog

弹出 angular 7

popup with angular 7

primeng

angular