时间戳

首页 > 解决方案 > 如何使用html中的角管道有选择地对数组中的元素进行排序

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

问题描述

<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 种类型的订单，由一组条件决定，列表排序如下资产顺序：资产、空间、属性 |

空间顺序：空间、资产、属性 |

属性顺序：属性、空间、资产 |

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

标签： javascriptangular

解决方案

不建议使用 Angular 管道进行排序。Angular.js (v1) 曾经有一个 orderBy 过滤器，Angular 团队从版本 2 开始删除了该过滤器。作为参考，您可以在此处查看链接。

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

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

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

希望能帮助到你。

推荐阅读