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

【问题标题】：sort array starts with specific word or letter in angular2排序数组以angular2中的特定单词或字母开头
【发布时间】：2018-01-30 06:15:34
【问题描述】：

我有一个 JSON 响应，我想按以特定单词或字母开头的命令。

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

这是我的 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
            }
        ]
    }
}

请给我建议。

【问题讨论】：

为什么要投反对票？
你能详细解释一下I need it to orderby ItenaryFor which starts with "ItenaryFor": "Sightseen"吗？
@Pengyy 作为响应，它有键 ItenaryFor 我需要具有值 "ItenaryFor": "Sightseen" 的记录首先开始意味着给它索引 0,1,2
为什么投反对票？您的问题太宽泛，只是列出了您的要求，并没有显示您的任何研究或努力。问题要么是关于排序并且它是重复的，要么是关于在 Angular 中构建一个管道，这在文档中得到了充分描述。在任何情况下，使用管道进行排序都不是一个好主意（这在documentation 中也有明确说明）。
您知道 orderBy 已从 Angular 中删除，但您不知道为什么？阅读管道页面。

标签： angular ngfor angular-pipe

【解决方案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 关于将其实现为管道。

【讨论】：

谢谢，如何用这个创建管道？
@NikhilRadadiya 几乎相同。等一下，我给你举个例子。
@NikhilRadadiya 检查添加了 plunker 演示。

【解决方案2】：

使用管道进行排序不是一个好主意。请参阅此处的链接：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);
    }
}

【讨论】：

我不太喜欢打开 observable 的包装。为什么不将 .map 原始 observable 转换为过滤后的 observable，然后在模板中用 async 管道解包？
想要发布带有 OP 示例代码的替代答案吗？