如何根据列的值（时间戳）对表进行排序

Question

我想根据时间戳对表格的行进行排序 上图显示了我想根据日期和时间排序的相同代码，就像我想在表行顶部看到最新查询一样

 <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr id="table-heading" class="heading">
              <td><small>No.</small></td>
              <td><small>Date Of Inspection</small></td>
              <td style="width: 15%;"><small>Transaction ID</small></td>
              <td><small>Plate No.</small></td>
              <td style="width: 7%;"><small>Lic No.</small></td>
              <td><small>Establishment Name</small></td>
              <td><small>Type of Vehicle</small></td>
              <!-- <td><small>Chassis Number</small></td>
          <td><small>Manufacturer</small></td> -->
              <td><small>Issue Date</small></td>
              <td><small>Expiry Date</small></td>
              <td><small>View Permit</small></td>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of inspections; let i=index">
              <td><small>{{((currentPage - 1) * itemsPerPage) + (i+1)}}</small></td>
              <td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
              <td><small>{{item.readingForm.tawasulRecieptNum}}-{{item.id}}</small></td>
              <td><small>{{item.vehicleInformationForm.registrationNumber}}</small></td>
              <td><small>{{item.entityInformationForm.tradeLicenseNumber}}</small></td>
              <td><small>{{item.entityInformationForm.companyName}}</small></td>
              <td><small>{{
                  (item.vehicleInformationForm.vehicleCategory==='1')?'Chiller' :
                  (item.vehicleInformationForm.vehicleCategory==='2')?'Freezer':
                  (item.vehicleInformationForm.vehicleCategory==='3')?'Freezer & Chiller':
                  (item.vehicleInformationForm.vehicleCategory==='4')?'Dry':
                  (item.vehicleInformationForm.vehicleCategory==='5')?'Chiller & Dry':
                  (item.vehicleInformationForm.vehicleCategory==='6')?'Freezer & Dry':
                  (item.vehicleInformationForm.vehicleCategory==='7')?'Hot Food in Thermo Box':
                  (item.vehicleInformationForm.vehicleCategory==='8')?'Insulated Box':
                  ''
                  }}</small></td>
              <!-- <td><small>{{item.vehicleInformationForm.chassisNumber}}</small></td>
                  <td><small>{{item.vehicleInformationForm.manufacturer}}</small></td> -->
              <td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
              <td><small>{{item.vehicleInformationForm.expireDate | date:'d-MMM-y'}}</small></td>
              <!-- <td><small><img src="../../../../../assets/images/detail.png" width="30"></small></td> -->
              <td><small><img src="../../../../../assets/images/view-report.png" width="30" style="cursor:pointer;"
                    (click)="print(item)"></small></td>
            </tr>
          </tbody>
        </table>
      </div>

Answer 1

对表进行排序只是对数组进行排序

this.inspections = this.inspections.sort((a: any, b: any) => {
    const dateA = a.issueDate.getTime();
    const dateB = b.issueDate.getTime();
    return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})

更新我们把代码放在哪里？

我假设您从服务接收数据（您订阅组件中的数据）。收到数据时在服务中（使用管道映射）或在组件中

如果您使用该服务：

getData()
{
    this.httpClient.get(...).pipe(
       map((res:any[])=>{
          return res.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
          })
    }))
}

如果在组件中选择排序

ngOnInit()
{
     this.dataService.getData().subscribe((res:any[])=>{
          this.inspections=res.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
          })
}

您还可以创建一个函数 sortData

sortData(data:any[]){
    return data.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
         })
}
//and use in "anywhere"
this.inspections=this.sortData(this.inspections)