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种类型的订单，这些订单由条件集决定，列表的排序如下资产顺序：资产，空间，财产|

空间顺序：空间，资产，财产|

财产顺序：财产，空间，资产|

如何使用管道或其他有效方式实现这一目标

Answer 1

不建议使用Angular管道进行排序。 Angular.js（v1）过去有一个orderBy过滤器，Angular团队从版本2开始将其删除。作为参考，您可以在此处查看link。

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

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

sortBy

希望有帮助。

Answer 2

您可以将管道注入到组件中。然后，只要数据集发生更改，就可以调用它们，例如在ngOnChanges（）-Lifecycle挂钩中。

public constructor(
  private assetPipe AssetPipe,
  private spacePipe SpacePipe,
  private propertyPipe PropertyPipe
){}


public reorder(){
  switch(this.getOrderType()){
    case 'asset':
      this.hazardInfo = this.assetPipe.transform(this.hazardInfo)
      this.hazardInfo = this.spacePipe.transform(this.hazardInfo)
      this.hazardInfo = this.propertyPipe.transform(this.hazardInfo)
      break
    case 'space':
      ...
    case 'property':
      ...
  }
}


public ngOnChanges(){
  this.reorder()
}

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

2 个答案: