orderBy 管道无法正常工作

Question

我正在使用页面中的 ngx-pipes：

https://www.npmjs.com/package/ngx-pipes#orderby

我专门使用了管道 orderBy，但是当我在我的 HTML 中使用 orderBy 管道时，信息的排序不正确（按从小到大的顺序）。

我尝试在处理过的对象中添加一个额外的属性，这个名为 diff 的属性是（lat 和 lng）TREATED PROPERTIES 之和的结果，而不是原始属性

并使用该属性而不是同时使用 lat 和 lng 属性，但不起作用...

这是我的 home.page.html：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p *ngFor = "let geo of absUserLocations | orderBy: ['lat', 'lng']">
      lat: {{geo.lat}}<br>
      lng: {{geo.lng}}<br>
    </p>
  </div>
</ion-content>

这是我的 home.page.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public myCurrentLocation = {lat: 44.6, lng: 10.50};
  public absUserLocations = [];
  public userGeolocations = [];

  constructor() {

    this.userGeolocations = [
      {
        lat: 44.71620446490455,
        lng: 10.692454582877872
      },
      {
        lat: 44.63622591783756,
        lng: 10.575689162245453
      },
      {
        lat: 44.827688291479625,
        lng: 10.580959962491988
      },
      {
        lat: 44.618612858983525,
        lng: 10.650185180418703
      },
      {
        lat: 44.83988342851342,
        lng: 10.757238916147344
      }
    ];

    this.userGeolocations.forEach((userLocation)=>{

      this.absUserLocations = 
      this.absUserLocations.concat([this.getUsersDistance(userLocation)]);

    });

  }

  toGeoposition(str){let [lat, lng] = [...str.split(";")]; return {lat, lng}}

  getUsersDistance(destinyUserLoc){

    return {
      lat: Math.abs(this.myCurrentLocation.lat - destinyUserLoc.lat), 
      lng: Math.abs(this.myCurrentLocation.lng - destinyUserLoc.lng)
    }

  }

}

注意：我有两个位置数组对象并且我只迭代一个的原因是第二个数组（absUserLocations）将包含用户当前位置与其他用户位置之间的差值的绝对值的计算，通过这个计算，我可以通过 orderBy 管道显示用户位置附近最近的用户。

在我的实际项目中，显然我不会显示地理位置，但我制作了这个简短的代码来确认一切正常。

当我在文档中看到结果时，我计算每个对象的 lat 和 lng 的总和并与其他对象的顺序进行比较，我意识到顺序是错误的！，我只需要显示信息absUserLocations 按从小到大的顺序...

这是我目前得到的订单：

Answer 1

orderBy 管道与您提供的数据按预期工作，因为它将按 lat 升序对数据进行排序，然后按 lng（这实际上意味着按 lat，因为您所有的 lats 都不同）。正如您在问题开头所写的那样，您真正想要订购的是 lat diff + lng diff。

<p *ngFor = "let geo of absUserLocations | orderBy: ['diff']">

this.absUserLocations = this.userGeolocations.map(loc => {
  const latDiff = Math.abs(this.myCurrentLocation.lat - loc.lat);
  const lngDiff = Math.abs(this.myCurrentLocation.lng - loc.lng);
  const diff = latDiff + lngDiff;
  return {lat: latDiff, lng: lngDiff, diff};
});