Невозможно применить фильтр поиска для данных, присутствующих в файле json

Question

Это мой (custom.component.html) файл

    <input ng-model="searchText" placeholder="&nbsp;&nbsp;Enter the name" 
            class="seacrh-field"><br><br>

     <mat-card class="example-card" *ngFor="let spaceScreen of 
               spaceScreens; 
                   let i = index">

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

          <mat-card-content class="names">{{ spaceScreen?.name }} 
          </mat-card-content>
       </mat-card-header>

    </mat-card>

Это файл (custom.component.ts)

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

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

              spaceScreens: Array<any>;

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


            }

Этот файл (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"
                    }

            ]        
        }

Все работает нормально, как я могу применить фильтр поиска (например, список контактов в мобильном телефоне) к данным, присутствующим в файле app.json. Попробовал много методов, но результат не дал. Как я могу легко добиться с помощью пользовательских каналов

Answer 1

В Angular 1 большинство людей делали фильтрацию с помощью труб. Это было указано Тричетрихе в комментариях к другому ответу и является правильным. Проблема в том, что такое поведение приводит к снижению производительности, поскольку каждый цикл дайджеста запускает фильтрацию (а это часто случается). Так что в Angular 2+ они хотят, чтобы вы фильтровали результаты в компонентах и ​​сохраняли результаты в массиве, а затем просто использовали *ngFor="myFilteredArray".

Сначала настройте привязку на вашем входе, чтобы мы могли получить то, что пользователь хочет найти.

//Use this method if you want to track name for more than a filter.  
//Result will be stored in name var
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
//Use this if you don't need to track the name text for anything else.
<input type="text" (input)="onNameChangeInput($event.target.value)">

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

Во-вторых, добавьте функции изменения в ваш component.ts

Вы будете хотеть библиотека как lodash или подчеркивание. Если у вас нет lodash, установите с - https://lodash.com/docs

npm install lodash

component.ts

import * as _ from 'lodash';

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 is what we filter against
              this.filteredScreens = res; //init with full list
         });
    }

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

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

Вам нужно использовать только один вход и одну функцию изменения, они имеют соответствующие имена, поэтому очевидно, какой метод подходит для каждого входа.

Редактировать: я забыл упомянуть, что это решение нечувствительно к регистру, так как обычно при поиске, подобном этому, вы не заботитесь о регистре. Если вы хотите, чтобы он был чувствительным к регистру, удалите.toUpperCase().