PrimeNG Turbotable默认扩展 [英] PrimeNG Turbotable expand by default

问题描述

我有一个 PrimeNg Turbotable ，具有行扩展功能.

I have a PrimeNg turbotable with row expansion feature.

默认情况下如何扩展行.

How can I expand the rows by default.

这是我的代码:

HTML

<p-table [columns]="cols" [value]="cars" dataKey="vin">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th style="width: 2.25em"></th>
        <th *ngFor="let col of columns">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    <tr>
        <td>
            <a href="#" [pRowToggler]="rowData">
                <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
            </a>
        </td>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-g-12 ui-md-3" style="text-align:center">
                    <img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
                </div>
                <div class="ui-g-12 ui-md-9">
                    <div class="ui-g">
                        <div class="ui-g-12">
                            <b>Vin:</b> {{rowData.vin}}
                        </div>
                        <div class="ui-g-12">
                            <b>Vin:</b> {{rowData.color}}
                        </div>
                        <div class="ui-g-12">
                            <b>Brand:</b> {{rowData.brand}}
                        </div>
                        <div class="ui-g-12">
                            <b>Color:</b> {{rowData.color}}
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
  </ng-template>
</p-table>

Ts

export class TableRowExpansionDemo implements OnInit {

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

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

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
        }
    }
}

我尝试使用 expandedRowKeys 属性，但是它不适用于我.

I tried using expandedRowKeys attribute, but it is not working for me.

我在这里想念什么?

谢谢

推荐答案

更新:对于版本> 7.x

将值设置为1在版本7+上将不起作用，请使用boolean(true/false)

Setting value to 1 won't work on version 7+ use boolean(true/false)

const thisRef = this;
 this.cars.forEach(function(car) {
   thisRef.expandedRows[car.vin] = true;
 });

工作 StackBlitz

对于版本< 7.x

我尝试使用ExpandedRowKeys属性

I tried using expandedRowKeys attribute

是的，您是对的.因此，将[expandedRowKeys]="expandedRows">添加到p-table元素:

Yes you're right. So add [expandedRowKeys]="expandedRows"> to p-table element :

<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">

然后，您只需要用要扩展的行的vin值填充expandedRows对象(因为dataKey是vin).

and then, you just need to fill expandedRows object with vin values of the rows you want to expand (because dataKey is vin).

因为要扩展所有行，所以可以这样填充:

Because you want all rows to be expanded, you can fill it like that :

    const thisRef = this;
    this.cars.forEach(function(car) {
      thisRef.expandedRows[car.vin] = 1;
    });

为了拥有类似的东西 expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}

in order to have something like expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}

查看正在运行的柱塞

这篇关于PrimeNG Turbotable默认扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！