标签: p-table

任何人都可以帮助我吗？我想初始化索引变量，例如 *ngFor="let d of sI.detail;let i=index"

在我的 p 表中

<ng-template pTemplate="body" let-rowData >
      <tr class="text-center info">
        <td>{{ totalHeader }} </td>
        <td>
          <span>
            {{ rowData?.totalUnits }}
          </span>
          <span>
            ({{ rowData?.totalSale }})
          </span>
          <span *ngIf="rowData.totalUnits && rowData.totalSale">
            /{{ (rowData.totalUnits/rowData.totalSale) | percent:'1.2-2' }}
          </span>
        </td>
      </tr>
    </ng-template>```

代码如下：

<p-table
    [columns]="colsHistoryLogEntryList"
    [value]="entity.historyLogEntryList"
    [resizableColumns]="true"
    [autoLayout]="true"
    [paginator]="true"
    [rows]="5"
    [rowsPerPageOptions]="[5, 10, 25, 50, 100]"
    paginatorDropdownAppendTo="body"
    class="ui-table-historyEntry-list"
    [rowHover]="true"
>

当页面最大化时，下拉列表呈现到底部并且部分隐藏。但是当页面缩小时，它会正确地呈现为向上方向。

如何强制下拉列表始终可见？

PRIMENG 是 Angular 的组件库，我目前正在使用他们的p-table组件来显示数据库中的数据。表中显示的一列包含一个布尔值，我希望true该列过滤器有一个默认值。

下面是该表的 HTML 示例：

<p-table    class="my-table"
            [value]="(myValues$ | async)!"
            [scrollable]="true"
            scrollHeight="flex"
            [virtualScroll]="true"
            selectionMode="single">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Some Boolean
                <div>
                    <!-- 
                   How can I set the filter to only show
                   items where someBoolean == true by default? 
                    -->
                    <p-columnFilter type="boolean" field="someBoolean"></p-columnFilter>
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-val>
        <tr [pSelectableRow]="val">
            <td>
                <i class="pi" [ngClass]="{'true-icon pi-check': val.someBoolean, 'false-icon pi-times': !val.someBoolean}"></i>
            </td>
        </tr>
    </ng-template>
</p-table>

该属性myValues$是一个Observable<MyValue[]>并且MyValue类似于：

export interface MyValue …

我试图在取消选择行时将行的颜色更改为不同的颜色。这个功能是primeng主题提供的。我正在尝试覆盖它来自定义它。无论如何，我可以在取消选择行时更改行颜色，然后保留该颜色直到再次选择该行吗？我在这里使用单选 p 表。

我尝试用这个来覆盖：

data-table p-table .ui-table.ui-table-hoverable-rows .ui-table-tbody > tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
   background-color: #2F96B4 !important;
}

但这只会改变鼠标悬停时的颜色。

这就是选择行时我所要做的：

data-table p-table .ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color: #007ad9;
   color: #ffffff;
}

我有一张<p-table>桌子sortMode="multiple"。我想在页面首次显示时指定两列作为默认排序。如果我设置 sortMode="single"，它可以通过指定 sortField="year" [sortOrder]="-1" 选项来工作（例如，标题显示为选中状态，列已排序）。多列相当于什么？

类似的示例代码（取自https://www.primefaces.org/primeng/showcase/#/table/sort）

<h3>Multi Sort with MetaKey</h3>
<p-table [columns]="cols" [value]="cars2" sortMode="multiple">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

export class TableSortDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 …