angular - 排序在 primeNG 表中无法正常工作。在排序模式下显示不均匀的数据？

问题描述

我已经使用 primeNG 表进行分页，但同时尝试对表行中的每个字段进行排序。它显示 1,2,3,4,5,6 到 14 的不均匀数据。当我单击排序（递增顺序）时，它显示 1,10,11,12,13,14,2,3,4,5， 6,7,8,9。

 **.html file**
   <p-table [value]="incomingbookings" [columns]="cols" #iwdtable [paginator]="true" [rows]="5"  [pageLinks]="1" [(selection)]="selectedIncomingBookings" dataKey="booking_id" [responsive]="true">
                <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>
                        <th>Add to offer</th>
                        <th>Action</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-incomingbookings >
                    <tr [pSelectableRow]="rowData">
                        <td field="offer_id">
                            <span class="ui-column-title" field="offer_id">Offer Id</span>
                            {{incomingbookings.offer_id}}
                        </td>
                        <td field="booking_id">
                            <span class="ui-column-title">Bookign Id</span>
                            {{incomingbookings.booking_id}}
                        </td>
                        <td field="ratings" style="padding-right:0px;padding-left:0px;">
                            <span class="ui-column-title">Shipper</span>
                            {{incomingbookings.shipper_info[0].name}}
                            <div>
                                <!-- <span class="fs10">{{incomingbookings.shipper_info[0].ratings}}</span> -->
                                <span class="stars-container stars-{{getvalue(incomingbookings.shipper_info[0].ratings)}}">★★★★★&lt;/span>
                            </div>
                        </td>
                        <td field="pcs" >
                            <span class="ui-column-title">Pcs</span>
                            {{incomingbookings.pcs}}
                        </td>
                        <td field="weight">
                            <span class="ui-column-title">Weight</span>
                            {{incomingbookings.weight}}
                        </td>
                        <td field="volume">
                            <span class="ui-column-title">Volume</span>
                            {{incomingbookings.volume}}
                        </td>
                        <td field="volume_weight">
                            <span class="ui-column-title">Volume Weight</span>
                            {{incomingbookings.volume_weight}}
                        </td>
                        <td field="chargeable_weight">
                            <span class="ui-column-title">Chargeable Weight</span>
                            {{incomingbookings.chargeable_weight}}
                        </td>
                        <td>
                            <span class="ui-column-title">Add to offer</span>
                            <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                        </td>
                        <td>
                            <span class="ui-column-title">Action</span>
                            <div class="dropdown">
                                <button class="dropbtn">Action</button>
                                <div class="dropdown-content">
                                <a href="#">Accept</a>
                                <a href="#">Waitlist</a>
                                <a href="#">Decline</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </ng-template>
                <!--<ng-template pTemplate="summary">
                    <ul>
                        <li *ngFor="let car of selectedIncomingBookings" style="text-align: left">
                            {{car.booking_id}}
                        </li>
                    </ul>
                </ng-template>-->
            </p-table>

.ts 文件

ngOnInit() {

this.pageName=this.constructor.name;
// this.myInnerHeight=window.screen.height;
this.cols = [
  { field: 'offer_id', header: 'Offer ID' },
  { field: 'booking_id', header: 'Booking ID' },
  { field: 'shipper_info', header: 'Shipper Info' },
  { field: 'pcs', header: 'pcs' },
  { field: 'weight', header: 'Weight' },
  { field: 'volume', header: 'volume' },
  { field: 'volume_weight', header: 'Volume weight' },
  { field: 'chargeable_weight', header: 'Chargeable Weight' },
];

this.incomingbookings=[{"offer_id":'1',"booking_id":"12345","shipper_info":[{"name":"hemanth","ratings":"4"}],"pcs":"123","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'2',"booking_id":"123455","shipper_info":[{"name":"hemanth","ratings":"3.5"}],"pcs":"1","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'3',"booking_id":"12345g","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"2","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'4',"booking_id":"12345o","shipper_info":[{"name":"hemanth","ratings":"5"}],"pcs":"3","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'5',"booking_id":"12345gk","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"4","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'6',"booking_id":"12345gn","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"5","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'7',"booking_id":"12345i","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"7","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'8',"booking_id":"12345u","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"9","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'9',"booking_id":"12345t","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"10","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'10',"booking_id":"12345x","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"34","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'11',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'12',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'13',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'14',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""}]

普通表（排序前）

显示数据时的初始表（第 1 页，共 3 页）。