我正在使用Angular 7和PrimeNG进行开发。我已经在state中放入了PrimeNG表(类型:PrimeNG Dynamic Dialog)。但是,数据表不会占用对话框的整个宽度。
<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();
}
由于分页器位于对话框的整个宽度上,我不知道为什么会出现问题。