行分组时，P-Table中显示的对象数组不会以原始顺序显示

Question

当行分组。

发送到表的数据以精确顺序渲染

呈现。

.ts

export class AppComponent implements OnInit {
  cars: any[];
  sales: any[];
   ngOnInit() {
  this.cars =[
    {"vin":"AAA","brand":"VW","year":1998,"color":"White","price":10000},
{"vin":"AAA","brand":"Mercedes","year":1985,"color":"Green","price":25000},
{"vin":"AAA","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
{"vin":"AAA","brand":"Audi","year":1970,"color":"Black","price":12000},
{"vin":"AAA","brand":"Volvo","year":1992,"color":"Red","price":15500},
{"vin":"BBB","brand":"VW","year":1993,"color":"Maroon","price":40000},
{"vin":"AAA","brand":"Fiat","year":1964,"color":"Blue","price":25000},
{"vin":"AAA","brand":"Renault","year":1983,"color":"Maroon","price":22000},
{"vin":"BBB","brand":"Renault","year":1961,"color":"Black","price":19000},
{"vin":"BBB","brand":"Audi","year":1984,"color":"Brown","price":36000},
{"vin":"CCC","brand":"VW","year":1984,"color":"Silver","price":215000},
{"vin":"BBB","brand":"Volvo","year":1987,"color":"Silver","price":32000},
{"vin":"BBB","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
{"vin":"CCC","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
{"vin":"AAA","brand":"Honda","year":1989,"color":"Maroon","price":36000},
{"vin":"AAA","brand":"BMW","year":1986,"color":"Blue","price":28000},
{"vin":"BBB","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
{"vin":"CCC","brand":"Mercedes","year":1991,"color":"White","price":25000},
{"vin":"DDD","brand":"VW","year":1992,"color":"Blue","price":36000},
{"vin":"CCC","brand":"Renault","year":2001,"color":"Blue","price":25000},
{"vin":"DDD","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
{"vin":"CCC","brand":"Audi","year":1966,"color":"Maroon","price":45000},
{"vin":"BBB","brand":"BMW","year":1962,"color":"Blue","price":54000},
{"vin":"BBB","brand":"Honda","year":1982,"color":"Blue","price":22000},
{"vin":"DDD","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
{"vin":"EEE","brand":"Mercedes","year":1986,"color":"White","price":18000},
{"vin":"CCC","brand":"BMW","year":1983,"color":"Brown","price":32000},
{"vin":"EEE","brand":"VW","year":1973,"color":"Maroon","price":36000},
{"vin":"FFFF","brand":"Mercedes","year":1991,"color":"Red","price":21000}
];
}
onSort() {
        this.updateRowGroupMetaData();
    }
    updateRowGroupMetaData() {
        this.rowGroupMetadata = {};
        if (this.cars) {
            for (let i = 0; i < this.cars.length; i++) {
                let rowData = this.cars[i];
                let brand = rowData.brand;
                if (i == 0) {
                    this.rowGroupMetadata[brand] = { index: 0, size: 1 };
                }
                else {
                    let previousRowData = this.cars[i - 1];
                    let previousRowGroup = previousRowData.brand;
                    if (brand === previousRowGroup)
                        this.rowGroupMetadata[brand].size++;
                    else
                        this.rowGroupMetadata[brand] = { index: i, size: 1 };
                }
            }
        }
    }
}

html

<p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <span style="font-weight:bold">{{rowData.brand}}</span>
            </td>                
        </tr>
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
</p-table>

plunker

https://plnkr.co/edit/duhp4a4a4dmlzumejmbkok?p=preview

Answer 1

正如我在评论中告诉您的那样，您应该使用自定义排序方法来按 brand 进行排序，然后由 vin ：

customSort(e) {
    this.cars.sort(function (a, b) {
      let aGroup = a.brand.toLowerCase();
      let bGroup = b.brand.toLowerCase();
      if (aGroup > bGroup) return 1;
      if (aGroup < bGroup) return -1;
      let aSort = a.vin.toLowerCase();
      let bSort = b.vin.toLowerCase();
      if (aSort > bSort) return 1;
      if (aSort < bSort) return -1;
      return 0
    });
  }

请参阅工作plunker