按 angular 中的字母顺序过滤 Json 数据 6

Question

这是我的 (customet.component.html) 文件

    <input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">

      <div *ngFor="let s of filteredScreenshots">
           {{s | json}}
        </div>

      <mat-card class="example-card" *ngFor="let filteredScreen  of 
         filteredScreens ; let i = index">
          <mat-card-header>
           <div mat-card-avatar class="example-header-image" >
               <img mat-card-image class="list-img" src=" 
              {{filteredScreen?.img}}" >
           </div>
        <mat-card-content class="names">{{ filteredScreen?.name }}</mat-card- 
          content>
         </mat-card-header>
     </mat-card>

这是(customer.component.ts)文件

            import { Component, OnInit } from '@angular/core';
            import { Http } from '@angular/http'; 
            import { map } from 'rxjs/operators'
            import * as _ from 'lodash';

            @Component({
            selector: 'ylb-customer',
            templateUrl: './customer.component.html',
            styleUrls: ['./customer.component.css']
            })

            export class CustomerComponent  {

            spaceScreens: Array<any>;
            filteredScreens = [];
            name: string;

            constructor(private http:Http){
                this.http.get('assets/app.json').pipe(
                        map(response => response.json().screenshots)
                    )
                    .subscribe(res => {
                        this.spaceScreens = res; 
                        this.filteredScreens = res;
                });
            }

            onNameChange() {
                this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
                    const name = screenshot['name'];
                    const filteredName = this.name.toUpperCase();
                    return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
                });
            }



            }

此 json 文件存在于资产文件夹中 (app.json)

              {   
        "screenshots":[ 

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Ramesh Kumar"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Joe Root"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Adam Evans"
                    }



            ]        
        }

Search/filter 工作正常，如何使 json 文件中的数据按字母顺序显示以及如何应用搜索名称字符串的姓氏，我的意思是假设我想搜索 chris woakes，如何只输入 woakes 来搜索它。

Answer 1

要以任何字母顺序显示，请制作自定义管道

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

参考下面link搜索功能

Serach pipe

Answer 2

我接受了 bajaran 的回答并将其修改为当字段内容为 null 时不会失败并且不区分大小写：

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

@Pipe({
    name: 'sort'
})
export class SortPipe implements 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;
    }
}

按 angular 中的字母顺序过滤 Json 数据 6

To filter Json data in alphabetical order in angular 6

angular

angular6

angular-pipe