文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html中使用角度管道对数组中的元素进行选择性排序

问如何在html中使用角度管道对数组中的元素进行选择性排序
EN

Stack Overflow用户

提问于 2018-08-07 15:07:00

回答 2查看 47关注 0票数 0

<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';
    }
  }

我有三种顺序，由一组条件决定，列表顺序如下资产顺序:资产，空间，属性|

空间顺序:空间、资产、属性

属性顺序:属性、空间、资产

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

javascript

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-07 15:13:17

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

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

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

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

希望能有所帮助。

票数 2

Stack Overflow用户

发布于 2018-08-07 15:23:32

可以将管道注入到构件中。然后，您可以在dataset发生更改时调用它们，例如在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()
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51720799

复制

相似问题

问如何在html中使用角度管道对数组中的元素进行选择性排序
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中使用角度管道对数组中的元素进行选择性排序EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中使用角度管道对数组中的元素进行选择性排序
EN