Question

我正在使用页面中的ngx管道：

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

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

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

并使用该属性而不是同时使用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管道显示用户位置周围最近的用户。

在我的真实项目中，显然我不会显示地理位置，但我编写了这段简短的代码来确认一切都井井有条。

当我在文档中看到结果时，我计算每个对象的经纬度和经度之和，然后按顺序将其与其他对象进行比较，我意识到顺序是错误的！，我只需要显示信息即可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};
});

orderBy管道无法正常运行

1 个答案: