时间戳

首页 > 解决方案 > *ngFor orderby 计算属性的可观察列表

angular - *ngFor orderby 计算属性的可观察列表

问题描述

首先，我是法国人，所以我为我的英语道歉......

我想用 *ngFor 订购一个 Observable。

这是我的代码：

this.allBoulangeries$ = this.allBoulangeriesService.getAllBoulangeries();

我从 firebase 获取所有数据。

接下来，我做一个 *ngFor 来显示：

<ion-card *ngFor="let boulangerie of allBoulangeries$ | async"  tappable (click)="viewDetails(boulangerie)">
        <div padding>
          <b>{{ boulangerie.name }}</b>
          <p>{{ boulangerie.address }}<br>
            {{ boulangerie.cp }} {{ boulangerie.ville }}</p>
          <p>Distance: {{ distanceTo(boulangerie.coordX, boulangerie.coordY, latitude, longitude) }}</p>
        </div>
      </ion-card>

我的问题是我想使用距离值对列表进行排序（使用函数从 coordX 和 coordY 计算）......目前，列表按字母顺序显示。

非常感谢您的支持 ！

标签： angularfirebaseionic-framework

解决方案

您可以创建一个自定义管道以按距离计算和排序：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'orderByDistance'})
export class OrderByDistancePipe implements PipeTransform {
  transform(boulangeries: Boulangerie[], latitude: number, longitude: number): Boulangerie[] {
    return boulangeries.sort((a, b) => {
        return distanceTo(b.coordX, b.coordY, latitude, longitude) -
               distanceTo(a.coordX, a.coordY, latitude, longitude);
    });
  }
}

此管道返回您订购的面包房列表。然后你可以在你的数组上使用它，方法是在管道之前传递数组，并在:.

<ion-card *ngFor="let boulangerie of ((allBoulangeries$ | async) | orderByDistance:latitude:longitude)"  tappable (click)="viewDetails(boulangerie)">
    <div padding>
        <b>{{ boulangerie.name }}</b>
        <p>{{ boulangerie.address }}<br>
           {{ boulangerie.cp }} {{ boulangerie.ville }}</p>
        <p>Distance: {{ distanceTo(boulangerie.coordX, boulangerie.coordY, latitude, longitude) }}</p>
    </div>
</ion-card>

另一种方法是对组件中的数组进行排序，通过管道连接到 observable 以返回有序数组的 observable：

this.boulangeriesOrdered$ = this.boulangeries.pipe(
    map(arr => arr.sort((a, b) =>
        distanceTo(b.coordX, b.coordY, latitude, longitude) -
        distanceTo(a.coordX, a.coordY, latitude, longitude)
    ))
);

然后你可以使用这个 observable 来代替 boulangeries$。

在性能方面，这两种方法将具有可比性，因为每次可观察对象生成新数组时都会发生排序。

推荐阅读