javascript - 如何使用html中的 Angular 管道有选择地对数组中的元素进行排序

Question

<ng-container *ngFor="let hazard of hazardInfo | getObjectKeys">
        <nova-accordion-item *ngIf="hazardInfo[hazard].length" 
         [isActive]="true">
          <div accordion-item-head fxLayoutWrap>
            <div novaTrunc fxFlex="100" fxFlex.sm="100">
              <nova-icon-text *ngIf="hazard === 'assetHazards'" 
             [icon]="'icon-triangles_three'" [text]=" 
  ('details.assetHazards'|sgTranslatePipe) +' ( 
                  '+hazardInfo.assetHazards.length+' )'"></nova-icon-text>
              <nova-icon-text *ngIf="hazard === 'propertyHazards'" 
         [icon]="'icon-office'" [text]=" 
     ('details.propertyHazards'|sgTranslatePipe) +' ( 
   '+hazardInfo.propertyHazards.length+' )'"></nova-icon-text>
              <nova-icon-text *ngIf="hazard === 'spaceHazards'" [icon]="'icon-square_opening'" [text]="('details.spaceHazards'|sgTranslatePipe) +' ( '+hazardInfo.spaceHazards.length+' )'"></nova-icon-text>
            </div>
          </div>
          <div accordion-item-body fxLayoutWrap>
            <workorder-ehs-hazard-table fxFlexFill [data]="hazardInfo[hazard]"></workorder-ehs-hazard-table>
          </div>
        </nova-accordion-item>
      </ng-container>



public getOrderType(): string {
    if (this.selectedOrder.assets && this.selectedOrder.assets.length) {
      return 'asset';
    } else if (this.selectedOrder.property && (this.selectedOrder.space && 
      this.selectedOrder.space.hasOwnProperty('id'))) {
      return 'space';
    } else if (this.selectedOrder.property) {
      return 'property';
    }
  }

我有 3 种类型的顺序，由一组条件决定，列表排序如下 Assets 顺序: Assets 、空间、属性(property) |

空间顺序:空间、 Assets 、属性(property) |

属性(property)顺序:属性(property)、空间、 Assets |

如何使用管道或任何其他有效的方式来实现这一点

Answer 1

不建议使用 Angular 管道进行排序。 Angular.js (v1) 曾经有一个 orderBy 过滤器，Angular 团队在版本 2 以后删除了该过滤器。作为引用，您可以查看link在这里。

要实现此类功能，您可以使用 sort 函数并在 .ts 文件中编写自己的比较器函数。

或者，您也可以使用 lodash 的 sortBy 函数根据提供的键进行排序。查看文档here 。例如，根据用户和年龄对用户进行排序。

_.sortBy(users, ['user', 'age']);

希望有帮助。