按字母顺序显示 json 数据

Question

这是我的（customer.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 | filter : filteredScreen;"  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);
    });
  }


}

我在(assets)文件夹里面创建了一个叫app.json的json文件，app.json文件代码如下

{   
  "screenshots":[ 

    {
        "img":"assets/img/json_2.jpg",
        "name":"Virat Kohli"
    },

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

    {
        "img":"assets/img/json_2.jpg",
        "name":"Adam Gilchrist"
    },
    {
        "img":"assets/img/json_2.jpg",
        "name":"Kevin Peterson"
    },

    {
        "img":"assets/img/json_2.jpg",
        "name":"Misbhah-Ul-Hak"
    },

    {
        "img":"assets/img/json_2.jpg",
        "name":"ABD Develliers"
    },
    {
        "img":"assets/img/json_2.jpg",
        "name":"Ben stokes"
    },

    {
        "img":"assets/img/json_2.jpg",
        "name":"Chris Gayle"
    }

  ]        
}

在名为 shared 的文件夹中创建了 2 个管道文件（sort.pipe.ts 和 filter.pipe.ts）

(sort.pipe.ts)如下

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

(filter.pipe.ts)如下

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

并像这样将这些管道文件导入（app.modules.ts）

import { FilterPipe} from './shared/filter.pipe';
import { ArraySortPipe} from './shared/sort.pipe';

@NgModule({
  declarations: [
  FilterPipe,
  ArraySortPipe
],  

我必须达到以下两个条件 1）我想按字母顺序显示 app.json 文件中存在的数据 2）我如何应用搜索名称字符串的姓氏，我的意思是假设我想搜索virat kohli，我如何只输入kohli来搜索它

我为这两个条件尝试了上面的代码，但没有任何问题，请找出这段代码中是否有任何错误。但是搜索发生是好的。

Answer 1

进行以下更改，您将获得输出。

您可以简单地按字母顺序对您的 http 响应进行排序。

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

  onNameChange() {
    this.filteredScreens=_.filter(this.spaceScreens,(item)=>{
      console.log(this.name)

return item.name.toLowerCase().indexOf(this.name.toLowerCase())>-1; });

  }
  sortByName = function(users) {
    const byName = function(user1,user2) {
      return user1.name.localeCompare(user2.name);
    };
    return users.slice().sort(byName);
  };

而html是

<div class="example-card" *ngFor="let filteredScreen of 
 filteredScreens "  let i = index>


    <div mat-card-avatar class="example-header-image" >
       <img mat-card-image class="list-img" src=" 
          {{filteredScreen?.img}}">
    </div>
      {{ filteredScreen?.name }} 

</div>