标签: primeng-datatable

我想让主要的 ng 数据表列设置为自动适应以及重新调整大小。所以我已经解决了在两个 css 类 .ui-datatable table 和 .ui-datatable-tablewrapper 中更改的这个问题。

我有一个 p 表定义为[scrollable]="true"

<p-table
  *ngIf="!loading"
  [value]="data"
  [resizableColumns]="true"
  [reorderableColumns]="true"
  [columns]="columns"
  [autoLayout]="true" <---
  [scrollable]="true" <---
  scrollHeight="75vh"
>

会将[scrollable]表布局从 更改display: table-cell为display:flex，因此[autoLayout]现在会忽略 。

我尝试将此处的样式设置为百分比宽度（即10%/10%/80%），但它对flex显示表格没有影响。

      <th
        *ngFor="let col of columns"
        pSortableColumn="{{ col.field }}"
        pReorderableColumn
        pResizableColumn
        [ngStyle]="{'width': col.width}" <---
      >

我看到有一个 PrimeNG 问题对此进行了评论，但是在使用时是否可以使用任何解决方法来获取设置的列宽度[scrollable]？

https://github.com/primefaces/primeng/issues/5510#issuecomment-432155295

如何在primeng自动完成框中显示多个字段.

例如:

<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name,lastname"></p-autoComplete>

or 
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name+' '+lastname"></p-autoComplete>

但是这不起作用.当我在一个字段属性中传递2个值时,如上所示,它不会在用户界面中显示任何值,对于单个值,它可以完美地工作

(例如:-field = "名称")

.

Primeng 的 MenuItem 有一个名为 command 的参数，该参数是单击其项目时要执行的函数。https://www.primefaces.org/primeng/#/steps 中提供了一个使用此示例以向用户提供反馈。

command: (event: any) => {
                this.activeIndex = 0;
                this.msgs.length = 0;
                this.msgs.push({severity:'info', summary:'First Step', detail: event.item.label});
            }

但是，我想像这样使用 MenuItem 作为我的 Primeng DataTable 的列。

为此，我需要以这种方式使用我的菜单：

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

获取“项目”和我点击的行以及其他类型的数据。

使用按钮我可以通过 onClick 传递项目和其他数据，但为此我需要为每个按钮创建一列。为了解决我想使用来自primeng的MenuItem的Menu。

问题是我找不到任何通过 MenuItem 中的命令传递参数的示例，而且我找不到方法来做到这一点。

如何使用带有 DataTable 的 MenuItem 来实现？

如果这是不可能的，我怎样才能实现相同的结果？

我正在尝试实现列大小调整和stick header。但是，如果我不使用列大小调整，则粘性标头可以很好地工作。如果同时实现这两种方法，则列调整大小是有效的，但粘性标头不起作用。

我使用了primeng的以下CSS作为粘性标头。

  :host ::ng-deep .ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
    }

    @media screen and (max-width: 64em) {
        :host ::ng-deep .ui-table .ui-table-thead > tr > th {
            top: 100px;
        }
    }

对于colum调整大小，我使用了以下代码[resizableColumns]="true"， pResizableColumn

  <p-table [columns]="cols" [value]="cars1" [resizableColumns]="true">
    ...
     <th *ngFor="let col of columns" pResizableColumn>

如果我删除resizbleColumns和pResizableColumn粘性标头工作正常。我怎样才能使它同时起作用呢？这是stackblitz和演示

我想对数据表列进行排序，但是它不起作用。下面是我得到的代码和错误。当我从打字稿向后端发出服务器调用时，它可以工作。当我使用状态管理时，排序不起作用。

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngSwitch]="col.field">
  {{col.header}}
  <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
  ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>

设备动作

  export class LoadDeviceFail implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICE_FAIL;
    constructor(public payload: string) { }
}
export class LoadDevices implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICES;
    constructor() { }
}
export class LoadDevicesSuccess implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICES_SUCCESS;
    constructor(public payload: DeviceModel[]) { }
}

设备效果

 @Effect()
  loadDevices$ = this.action$.pipe(
    ofType( …

我正在将一个模块从 primeng 7 迁移到 primeng11 以及 angular11 代码在 ng 服务上运行得很好，功能也正常工作，但在构建时我遇到了一个奇怪的错误

 error TS2339: Property 'value' does not exist on type 'FilterMetadata | FilterMetadata[]'.
  Property 'value' does not exist on type 'FilterMetadata'.

错误是针对以下代码的

<input *ngIf='!col.noFilter' [style.width]="'98%'" [style.height]="'25px'" pInputText type="text"
                        [placeholder]="col.filterPlaceHolder ? col.filterPlaceHolder : ''" 
                        (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)" 
                        [value]="dt.filters[col.field]?.value" />
 

我已经验证了 primengFilterMetaData接口，它的属性值如下

export interface FilterMetadata {
    value?: any;
    matchMode?: string;
    operator?: string;
}

代码语法很好，我已经在 primeng 页面文档上验证了相同的语法https://www.primefaces.org/primeng/showcase/#/table

请帮助不确定为什么 ng 服务没有问题但构建失败。我的节点版本是节点v10.23.0

如何在数据表中使用 PrimeNG 的默认过滤器过滤后获取行数。

[totalRecords]="totalRecords"始终显示最初获取的记录数。

即使经过过滤，totalRecords值仍然保持不变并且过滤后不会改变。

例如：最初totalRecords是50，过滤后，数据表中显示的记录数是15。但是我无法得到值15，而是得到50。

有什么办法吗？

我在 Angular 5 中使用 PrimeNG 6.0.2，但我在使用Table插件时遇到了问题。我切换到 Table 因为 DataTable 已被弃用。现在，我无法像以前那样访问过滤值。

假设我通过 ViewChild 在组件中定义我的表：

@ViewChild('myTable') dataTable: Table;

使用 DataTable，我可以访问保存排序和过滤数据的_value属性：

dataTable._value[index] = ...;

但是现在，这个属性只保存排序后的数组，而我必须使用filteredValue属性：

dataTable.filteredValue[index] = ...;

我的这个问题是filteredValue是undefined任何过滤之前，有当过滤表中的值，是null在我删除所有过滤文本。这会产生一些非常丑陋的代码。

是否可以访问当前数据，无论是排序、过滤还是与起始数组相同？还是我必须采用这种方法？

当列表数据值为空时，我需要显示一条消息：

 <p-table [value]="listElement" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,20]" [showCurrentPageReport]="true" emptyMessage="No record found">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>Code</th>

                        </tr>
                    </ng-template>

                    <ng-template pTemplate="body" let-elements>
                        <tr>
                            <td>{{elements.code}}</td>

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

问题是，当 listElement 为空时，它不会在emptyMessage属性中显示消息，而仅将表显示为空。有人知道我该如何解决这个问题吗？