PrimeNG:表的显示问题-状态

时间:2019-02-22 09:33:52

标签: angular dialog primeng

我正在使用Angular 7和PrimeNG进行开发。我已经在state中放入了PrimeNG表(类型:PrimeNG Dynamic Dialog)。但是,数据表不会占用对话框的整个宽度。 enter image description here

<p-table #dt1 [columns]="cols" [value]="myData" [paginator]="true" [rows]="5" dataKey="ID_Data"
selectionMode="single" [(selection)]="selectedRow" [resizableColumns]="true" [reorderableColumns]="true">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" pSortableColumn="col.field" pResizableColumn pReorderableColumn> 
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
    </tr>
    <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col.field" class="ui-fluid">
            <input pInputText type="text" (input)="dt1.filter($event.target.value, col.field, col.filterMatchMode)" [value]="dt1.filters[col.field]?.value">
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
            <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

showTable() {
   const ref = this.dialogService.open(PopUpTableComponent, {
      header: 'Data Table',
      width: '70%',
      contentStyle: {'max-height': '350px', 'overflow': 'auto'}
   });

   ref.onClose.subscribe();

}

由于分页器位于对话框的整个宽度上,我不知道为什么会出现问题。

0 个答案:

没有答案