排序数组以angular2中的特定单词或字母开头

Question

我有一个 JSON 回复，我想按照以特定单词或字母开头的回复进行排序。

我需要它来对以 "ItenaryFor": "Sightseen" 开头的 ItenaryFor 进行排序请检查下面 JSON 来自 API 的回复。

这是我的 JSON:

{
    "resultCode": 1,
    "resultData": {
        "Itinary": [
            {
                "ItenaryFor": "Transfer",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": null,
                "BackgroundImg": null
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Coral Island",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Coral Island",
                "BackgroundImg": null
            }
        ]
    }
}

请给我建议。

Answer 1

您可以使用 Array.sort 来实现这一点。参见 docs。

参考下面的例子：

var arr = [{
    "ItenaryFor": "Transfer",
    "Icon": "motel",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Phi Phi Island, Phuket City Tour",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Sightseen",
    "Icon": "holiday",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Phi Phi Island, Phuket City Tour",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Sightseen",
    "Icon": "holiday",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Phi Phi Island, Phuket City Tour",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Hotel",
    "Icon": "motel",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Phi Phi Island, Phuket City Tour",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Hotel",
    "Icon": "motel",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Phi Phi Island, Phuket City Tour",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Hotel",
    "Icon": "motel",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": null,
    "BackgroundImg": null
  },
  {
    "ItenaryFor": "Sightseen",
    "Icon": "holiday",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Coral Island",
    "BackgroundImg": ""
  },
  {
    "ItenaryFor": "Hotel",
    "Icon": "motel",
    "Comment": null,
    "Iscustomsave": true,
    "TourDelight": "Coral Island",
    "BackgroundImg": null
  }
];

arr.sort(function(a,b) {
  if(a.ItenaryFor.indexOf('Sightseen') === 0) {
    return -1;
  } else {
    return 1;
  }
});

console.log(arr);

Plunker demo关于将其实现为管道。

Answer 2

使用管道进行排序不是一个好主意。请参阅此处的 link：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

而是在组件中添加代码来执行排序。

这是一个例子。这是一个过滤器，但您可以将其更改为排序。

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

排序数组以angular2中的特定单词或字母开头

sort array starts with specific word or letter in angular2

angular

ngfor

angular-pipe