行分组时,p表中显示的对象数组不会按原始顺序显示

当 行分组 .

发送到表中的数据按精确顺序呈现

.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>

普朗克

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