Angular 8 фильтр / поиск json списки с несколькими ключами поиска - PullRequest
Новая
       36

Angular 8 фильтр / поиск json списки с несколькими ключами поиска

0 голосов
/ 13 апреля 2020

Как использовать несколько ключей поиска (json) в моем Pipe

Пользовательский канал, который принимает несколько аргументов (keys / json keys: ['name', 'age', 'id'] ).

Вместо этого 

HTML « *ngFor="let student of students | jsonFilterBy:[searchText, 'name'] "

Я хочу использовать несколько ключей поиска ['name', 'age', 'id']: как показано ниже 

HTML « *ngFor="let student of students | jsonFilterBy:[searchText, 'name', 'age', 'id'] "

Фильтрация содержимого по каналу «json-filter-by.pipe.ts




Это мои JSON данные. 

JSON « [{ id: 1, name: 'Mr.Jhon' ,age:14}, { id: 2, name: 'Miss.mary' ,age:84}, { id: 1, name: 'Mrs.Carol' ,age:104}]


это пользовательская труба 

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

@Pipe({ name: 'jsonFilterBy' })
@Injectable()
export class JsonFilterByPipe implements PipeTransform {

  transform(json: any[], args: any[]) : any[] {
    var searchText = args[0];
    var jsonKey = args[1];

    // json = undefined, args = (2) [undefined, "name"]
    if(searchText == null || searchText == 'undefined') return json;
    if(jsonKey    == null || jsonKey    == 'undefined') return json;

    // Copy all objects of original array into new Array.
    var returnObjects = json;
    json.forEach( function ( filterObjectEntery ) {

      if( filterObjectEntery.hasOwnProperty( jsonKey ) ) {
        console.log('Search key is available in JSON object.');

        if ( typeof filterObjectEntery[jsonKey] != "undefined" && 
        filterObjectEntery[jsonKey].toLowerCase().indexOf(searchText.toLowerCase()) > -1 ) {
            // object value contains the user provided text.
        } else {
            // object didn't match a filter value so remove it from array via filter
            returnObjects = returnObjects.filter(obj => obj !== filterObjectEntery);
        }
      } else {
        console.log('Search key is not available in JSON object.');
      }

    })
    return returnObjects;
  }
}

Добавить в @NgModule «Добавить JsonFilterByPipe в список объявлений в вашем модуле; если вы забудете это сделать, вы получите сообщение об ошибке без провайдера для jsonFilterBy. Если вы добавите в модуль, он будет доступен для всех компонентов этого модуля. 

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule, ReactiveFormsModule,
  ],
  providers: [ StudentDetailsService ],
  declarations: [
    UsersComponent, UserComponent,

    JsonFilterByPipe,
  ],
  exports : [UsersComponent, UserComponent]
})
export class UsersModule {
    // ...
}

Имя файла: users.component.ts и StudentDetailsService создается из этой ссылки . 

import { MyStudents } from './../../services/student/my-students';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { StudentDetailsService } from '../../services/student/student-details.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: [ './users.component.css' ],

  providers:[StudentDetailsService]
})
export class UsersComponent implements OnInit, OnDestroy  {

  students: MyStudents[];
  selectedStudent: MyStudents;

  constructor(private studentService: StudentDetailsService) { }

  ngOnInit(): void {
    this.loadAllUsers();
  }
  ngOnDestroy(): void {
    // ONDestroy to prevent memory leaks
  }

  loadAllUsers(): void {
    this.studentService.getStudentsList().then(students => this.students = students);
  }

  onSelect(student: MyStudents): void {
    this.selectedStudent = student;
  }

}

Имя файла: users.component.html

<div>
    <br />
    <div class="form-group">
        <div class="col-md-6" >
            Filter by Name: 
            <input type="text" [(ngModel)]="searchText" 
                   class="form-control" placeholder="Search By Category" />
        </div>
    </div>

    <h2>Present are Students</h2>
    <ul class="students">
    <li *ngFor="let student of students | jsonFilterBy:[searchText, 'name'] " >
        <a *ngIf="student" routerLink="/users/update/{{student.id}}">
            <span class="badge">{{student.id}}</span> {{student.name | uppercase}}
        </a>
    </li>
    </ul>
</div>
...