使用 *ngFor 数组排序

Posted 2023-02-22

【中文标题】使用 *ngFor 数组排序

【英文标题】：Orderby with *ngFor array

【发布时间】：2018-07-02 08:34:53

【问题描述】：

我使用 Firebase 实时数据库在我的 json 文件中创建了以下结构，以处理 Composer 和他的作品：

我有以下服务，可以为我提供一位作曲家及其作品的数据

getComposerWithKey(key: string): Observable<Composer> 
const memberPath = `composer/$key`;
this.composer = this.db.object(memberPath)
  .snapshotChanges().map(action => 
    const $key = action.payload.key;
    const arrcompositions = action.payload.val().compositions?Object.entries(action.payload.val().compositions):null;
    const data =  
      $key,
      arrcompositions,
      ...action.payload.val() ;
    return data;
  );
return this.composer

现在我可以使用 ngFor 指令获取作曲家信息以及他的作品列表：

<mat-list-item *ngFor="let composition of composer.arrcompositions">
     composition[1] 
</mat-list-item>

我的问题是我无法按字母顺序排列作品。我尝试使用ngx-order-pipe，但我不知道如何精确用于订购的值

<mat-list-item *ngFor="let composition of composer.arrcompositions | orderBy: 'composition[1]'">
 composition[1] 

这显然行不通……

【参考方案1】：

我用这个包：ngx-pipes.

npm i ngx-pipes

import NgPipesModule from 'ngx-pipes';

@NgModule(
 // ...
 imports: [
   // ...
   NgPipesModule
 ]
)

<div *ngFor="let item of items | orderBy: 'id'">  item  </div>

【参考方案2】：

You should not use ordering pipes。

Angular 团队和许多经验丰富的 Angular 开发人员强烈建议将过滤和排序逻辑转移到组件中。

如果您想按照name 对您的项目进行排序，就这样吧：

sortBy(prop: string) 
  return this.composer.arrcompositions.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);

在您的 html 中：

<mat-list-item *ngFor="let composition of sortBy('name')">
   composition[1] 
</mat-list-item>

【讨论】：

感谢 trichetriche 的建议，我将停止使用管道对物品进行分类。我不确定是否可以在我的案例中使用此 filterBy 函数，因为我正在使用我的组合节点中的键和值。

对象中的键和值？因为如果是这样，您的 ngFor 循环将无法工作！

我的 ngFor 工作，因为我用它们创建数组：Object.entries(action.payload.val().compositions);

你想对一个对象的属性进行排序？

是的，我正在尝试使用值（作品的标题）对它们进行排序。我认为结构节点 : [ composition : name, composition : key1:value1, key2, value2, .... ] 是较轻的一个。通过这种方式，尝试使用非规范化方法......