Использование трубы фильтра в угловом 4

Я использую фильтрующую трубу в своем приложении angular 4. Но у меня проблема, так как я фильтрую внутри массива, но также и внутри этого массива. Итак, я не могу найти это конкретное имя ... поскольку я могу найти только первый массив, но не внутренний массив. Вот мой ответ JSON и мой код канала ниже. Здесь я могу искать только "admin name and email", НО я не могу искать "Outlet name, address AND Role name"

JSON

{
  "token": "eyefqffiwqnrfoqif",
  "users": [
    {
      "id": 1,
      "name": "Admin",
      "email": "[email protected]",
      "created_at": "2018-01-05 07:17:41",
      "updated_at": "2018-01-05 09:17:41",
      "outlet": {
      "id": 1,
      "name": "Sarawak Energy Berhad",
      "address": "Kuching City",
      "contact_number": "1300-88-3111",
      "created_at": "2018-01-05 10:17:44",
      "updated_at": "2018-01-05 10:17:44"
    },
      "roles": [
        {
          "id": 1,
          "name": "Admin",
          "created_at": "2018-01-05 10:17:40",
          "updated_at": "2018-01-05 10:17:40",
          "pivot": {
            "model_id": 1,
            "role_id": 1
          },
        }
      ]
    }
  ]
}

ФИЛЬТР ТРУБКА

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){
        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }
      }
      return false;
    });
  }
}

angular filter angular-pipe angular2-services
person Joseph    schedule 07.01.2018    source источник
comment
ваш JSON не имеет этого значения   -  person Sajeetharan    schedule 07.01.2018
comment
@Sajeetharan. Помоги пожалуйста :)   -  person Joseph    schedule 07.01.2018
comment
опубликуйте свой полный JSON   -  person Sajeetharan    schedule 07.01.2018
comment
@Sajeetharan. Это мой полный JSON. Я могу искать ТОЛЬКО имя администратора и адрес электронной почты, НО не могу найти имя, описание И имя роли   -  person Joseph    schedule 07.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

В этом случае ваша розетка - это еще один объект внутри каждого объекта массива, поэтому вам нужно специально добавить фильтр для розетки следующим образом:

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
 transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){

        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }
         if(property ='outlet'){
           if(item[property].name.toString().toLowerCase().includes(term.toLowerCase())){
           console.log(item[property].name);
          return true;
         }

        }
         if(property ='roles'){
         if (item[property].filter(e => e.name === term.toLowerCase()).length > 0) {
          return true;
         }

        }
       }
      return false;
    });
  }

}

DEMO STACKBLITZ

person Sajeetharan    schedule 07.01.2018
comment
Спасибо. Работает с названием розетки, как насчет названия роли? - person Joseph; 07.01.2018
comment
вам нужно добавить еще один фильтр для ролей проверьте обновленную демонстрацию - person Sajeetharan; 07.01.2018
comment
Ошибка в названии роли. Невозможно прочитать свойство "имя" неопределенного - person Joseph; 07.01.2018
comment
где? я не вижу - person Sajeetharan; 07.01.2018
comment
проверьте прилагаемую демоверсию. - person Sajeetharan; 07.01.2018
comment
stackblitz.com/edit/angular-pipe- пример-kaz7wq? file = app /. Проверь это. Введите admin в строке поиска, и он не может его найти - person Joseph; 07.01.2018
comment
Конечно ! сделал только что - person Sajeetharan; 07.01.2018