Angular 用于对数组的数组进行排序的自定义管道

我有一个数组，每个数组有两个元素，即

arr[a[2]]

。索引0是名称，索引1是大小。我需要一个管道来根据大小ie索引1对数组的数组进行排序

例如：

arr [ [ 'hello' , '1' ] , [ 'how' , '5' ] , [ 'you' , '12' ] , [ 'are' , '6' ] ]

管道输出应为：

arr [ [ 'hello' , '1' ] , [ 'how' , '5' ] , [ 'are' , '6' ] , [ 'you' , '12' ] ]

HTML文件：

<p> {{items  | custompipe }}</p>

{{items | custompipe}

使用管道进行排序不是一个好主意。请参见此处的链接：

相反，在组件中添加代码以执行排序

这里有一个例子。这一个过滤器，但您可以改为排序

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}

从'@angular/core'导入{Component，OnInit}；
从“./product”导入{IPProduct}；
从“./product.service”导入{ProductService}；
@组成部分({
templateUrl:“./product list.component.html”
})
导出类ProductListComponent实现OnInit{
_listFilter：字符串；
获取listFilter（）：字符串{
返回此项。\u listFilter；
}
设置listFilter（值：字符串）{
这是。_listFilter=值；
this.filteredProducts=this.listFilter？this.performFilter（this.listFilter）：this.products；
}
filteredProducts:IPProduct[]；
产品：IPProduct[]=[]；
构造函数（private\u productService:productService）{
}
performFilter（filterBy:string）：IPProduct[]{
filterBy=filterBy.toLocaleLowerCase（）；
返回此.products.filter（（产品：IPProduct）=>
product.productName.toLocaleLowerCase（）.indexOf（filterBy）！=-1）；
}
ngOnInit（）：void{
这是._productService.getProducts（）
.订阅（产品=>{
这一点。产品=产品；
this.filteredProducts=this.products；
},
error=>this.errorMessage=error）；
}
}

使用管道进行排序不是一个好主意。请参见此处的链接：

相反，在组件中添加代码以执行排序

这里有一个例子。这一个过滤器，但您可以改为排序

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}

从'@angular/core'导入{Component，OnInit}；
从“./product”导入{IPProduct}；
从“./product.service”导入{ProductService}；
@组成部分({
templateUrl:“./product list.component.html”
})
导出类ProductListComponent实现OnInit{
_listFilter：字符串；
获取listFilter（）：字符串{
返回此项。\u listFilter；
}
设置listFilter（值：字符串）{
这是。_listFilter=值；
this.filteredProducts=this.listFilter？this.performFilter（this.listFilter）：this.products；
}
filteredProducts:IPProduct[]；
产品：IPProduct[]=[]；
构造函数（private\u productService:productService）{
}
performFilter（filterBy:string）：IPProduct[]{
filterBy=filterBy.toLocaleLowerCase（）；
返回此.products.filter（（产品：IPProduct）=>
product.productName.toLocaleLowerCase（）.indexOf（filterBy）！=-1）；
}
ngOnInit（）：void{
这是._productService.getProducts（）
.订阅（产品=>{
这一点。产品=产品；
this.filteredProducts=this.products；
},
error=>this.errorMessage=error）；
}
}

您有什么问题吗？这不是一个代码编写服务；开始吧。@jonrsharpe我是一个新的学习者，请帮助然后阅读文档，我们也不是来这里学习教程的。使用搜索，类似这样的内容应该可以让您开始学习@苏丽尔非常感谢你有问题吗？这不是一个代码编写服务；开始吧。@jonrsharpe我是一个新的学习者，请帮助然后阅读文档，我们也不是来这里学习教程的。使用搜索，类似这样的内容应该可以让您开始学习@苏黎尔非常感谢你的回复，我喜欢你在pluralsight上的视频，它们对我的学习帮助很大。这个答案对我很有帮助，因为我一直在使用OrderBySort管道，尽管我知道性能的影响。很高兴看到更好的方法，我计划重构一些代码。谢谢请参阅DeborahK在此处的评论，以获取她的完整解决方案的链接，以及如何在不使用管道的情况下正确处理过滤。感谢您的回复，我喜欢您在pluralsight上的视频，它们对我的学习有很大帮助。这个答案对我很有帮助，因为我一直在使用OrderBySort管道，尽管我知道性能的影响。很高兴看到更好的方法，我计划重构一些代码。谢谢请参阅DeborahK在此处的评论，以获取其完整解决方案的链接，以及关于如何在不使用管道的情况下正确处理过滤的链接。