Question

我有一个我在工作的离子cordova应用程序，运行打字稿。我有一个对象数组。每个对象都包含一个位置的信息。每个位置中的一个字段是距离用户的英里距离。将这些位置打印到模板时，我需要按从最小距离到最大距离的顺序打印它们。我是打字稿的新手。

以下是我的对象数组的示例：

    (7) [Object, Object, Object, Object, Object, Object, Object]
    0:Object
        distance:17.24
        emails:"someemail@email.com, anotheremail@email.com"
        location_adress:"555 Address Road, San Antonio, TX, United States"
        location_city:"San Antonio"
        location_fax:"555-555-5551"
        location_id:"1"
        location_image:"http://CDN/path/to/image1.jpg"
        location_latitude:"29.3778525"
        location_longitude:"-98.50377409999999"
        location_name:"Some Name1"
        location_phone:"555-555-5551"
        location_state:"Texas"
        location_status:"1"
        location_street:"555 Address Road"
        location_zip_code:"78214"
        __proto__:Object
    1:Object
        distance:19.994
        emails:"someemail@email.com, anotheremail@email.com"
        location_adress:"556 Address Road, San Antonio, TX, United States"
        location_city:"San Antonio"
        location_fax:""
        location_id:"3"
        location_image:"http://CDN/path/to/image2.jpg"
        location_latitude:"29.4592474"
        location_longitude:"-98.64008209999997"
        location_name:"Some Name2"
        location_phone:"555-555-5552"
        location_state:"Texas"
        location_status:"1"
        location_street:"556 Address Road"
        location_zip_code:"78251"
        __proto__:Object
    2:Object
        distance:14.19
        emails:"someemail@email.com, anotheremail@email.com"
        location_adress:"557 Address Road, San Antonio, TX, United States"
        location_city:"San Antonio"
        location_fax:""
        location_id:"4"
        location_image:"http://CDN/path/to/image3.jpg"
        location_latitude:"29.45775019999999"
        location_longitude:"-98.5540115"
        location_name:"Some Name3"
        location_phone:"555-555-5553"
        location_state:"Texas"
        location_status:"1"
        location_street:"557 Address Street"
        location_zip_code:"78228"
        __proto__:Object
    ...... ect...

如何在组件文件中按最小距离编号将这些对象排序为最大？然后我会将正确的订单打印到我的模板。

以下是我的模板中的块，用于打印对象：

  <ion-col col-12 col-sm-6>

    <div class="list-results">

      <div class="zip-result" *ngFor="let item of dataSet" (click)="push(item.location_id)">
        <p class="location-name">{{item.location_name}}</p>
        <p class="address"><ion-icon name="navigate-outline"></ion-icon> {{item.location_adress}}</p>
        <p class="go-to-location">
            <ion-icon name="arrow-forward" ></ion-icon>
        </p>
      </div>
    </div>
  </ion-col>

这看起来很简单，但除了“angular2 +不允许orderBy”之外，我找不到任何其他内容，如果我可以在组件文件中重新排序它们没什么大不了的。有什么想法吗？

Answer 1

对于数组，您可以使用sort，但如果将新项目添加为具有排序顺序的视图绑定，则不会自动更新：

list.sort((a, b) => a.distance - b.distance);

Answer 2

这就是魔术：

    this.dataSet = newArr.sort(function(a, b) {
        return parseFloat(a.distance) - parseFloat(b.distance);
    });

按对象属性数值

2 个答案: