Angular 按字母顺序过滤Json数据（按字母顺序排列）

这是我的（customet.component.html）文件

---

搜索/筛选工作正常，如何使json文件中的数据按字母顺序显示，如何应用名称字符串姓氏搜索，我的意思是，假设我要搜索chris woakes，如何仅键入woakes进行搜索。

要按字母顺序显示，请创建自定义管道

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any[], field: string): any[] {
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

有关搜索功能，请参阅下面的链接

---

我接受了巴贾兰的答案，并对其进行了修改，使其在字段内容为空时不会失败，并且不敏感地处理案例：

import { Pipe, PipeTransform } from '@angular/core';

@烟斗({ 名称：“排序” }) 导出类SortPipe实现PipeTransform{

transform(array: any, field: string): any[] {
    if (!array) {
        return array;
    }
    array.sort((a: any, b: any) => {
        if ((a[field] || '').toLowerCase() < (b[field] || '').toLowerCase()) {
            return -1;
        } else if ((a[field] || '').toLowerCase() > (b[field] || '').toLowerCase()) {
            return 1;
        } else {
            return 0;
        }
    });
    return array;
}

transform（数组：any，字段：string）：any[]{
if（！数组）{
返回数组；
}
array.sort（（a:any，b:any）=>{
if（（a[字段]| |“”）.toLowerCase（）<（b[字段]| |“”）.toLowerCase（））{
返回-1；
}else if（（a[字段]| |“”）.toLowerCase（）>（b[字段]| |“”）.toLowerCase（））{
返回1；
}否则{
返回0；
}
});
返回数组；
}

---

}

我是否需要为排序和筛选创建两个管道？或者您也可以创建一个管道，但请指定是否使用不同的管道。在这种情况下，最好使用不同的管道。我收到此错误未捕获错误：模板解析错误：找不到管道“排序”（“f filteredScreens；let i=index”>在app.module.ts文件中添加管道类名从“指定管道所在位置”导入{ArraySortPipe}；从“指定位置”导入{FilterPipe}；@NgModule（{declarations:[ArraySortPipe，FilterPipe]}）感谢您改进了另一个用户的答案！也很好，您给予了适当的信任：）不过，最好是修改原始答案，而不是复制大部分答案并将其作为新答案发布。你可以编辑任何帖子，或者，如果你不确定，添加一条评论，询问OP是否愿意添加你的建议。

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any[], field: string): any[] {
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

<mat-card class="example-card" *ngFor="let filteredScreen  of 
         filteredScreens | sort : fieldName" ; let i = index">

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

import { Pipe, PipeTransform } from '@angular/core';

transform(array: any, field: string): any[] {
    if (!array) {
        return array;
    }
    array.sort((a: any, b: any) => {
        if ((a[field] || '').toLowerCase() < (b[field] || '').toLowerCase()) {
            return -1;
        } else if ((a[field] || '').toLowerCase() > (b[field] || '').toLowerCase()) {
            return 1;
        } else {
            return 0;
        }
    });
    return array;
}