Угловой 4-трубный фильтр для вложенного массива json

Я пытаюсь использовать настраиваемый канал для фильтрации моего цикла данных Json, используя поле ввода с ngModel. В основном у меня есть боковая панель с большим количеством элементов, поэтому я хочу иметь поле ввода, чтобы я мог искать элементы на боковой панели. Теперь элементы боковой панели могут быть одиночными или содержать подпункты. Вот мой массив боковой панели (который в основном является моделью для боковой панели), из которого я хочу фильтровать элементы:

Массив

export const menu_items = [
  {
    "title": "Dashboard",
    "class": "nav-item",
    "iconClass": "icon-speedometer"
  },
  {
    "title": "Configuration",
    "class": "nav-item nav-dropdown",
    children: [
      {
        "title": "Area Setup",
        "iconClass": "icon-puzzle",
        "dropdown" : true,
        children: [
          {
            "title": "Company",
            "iconClass": "icon-puzzle"
          },
          {
            "title": "Office",
            "iconClass": "icon-puzzle"
          }
        ]
      },
      {
        "title": "User Setup",
        "iconClass": "icon-puzzle",
        "dropdown" : true,
        children: [
          {
            "title": "Company",
            "iconClass": "icon-puzzle"
          },
          {
            "title": "Profile",
            "iconClass": "icon-puzzle"
          },
          {
            "title": "User",
            "iconClass": "icon-puzzle"
          },
          {
            "title": "Role",
            "iconClass": "icon-puzzle"
          }
        ]
      },
    ]
  },
  {
    "title": "Receiving",
    "class": "nav-item",
    children: [
      {
        "title": "Receipt Enquiry",
        "iconClass": "icon-speedometer"
      },
      {
        "title": "Receiving",
        "iconClass": "icon-speedometer"
      },
    ]
  },
  {
    "title": "Logs",
    "class": "nav-item",
    children: [
      {
        "title": "Inventory Logs",
        "iconClass": "icon-list"
      },
      {
        "title": "Audit Logs",
        "iconClass": "icon-list"
      },
      {
        "title": "Process Logs",
        "iconClass": "icon-list"
      }
    ]
  },
];

Вот мой компонент

import { MenuModel, menu_items } from "./menu.model";

@Component({
  selector: 'app-dashboard',
  templateUrl: './layout.component.html',
  providers: [MenuModel]
})

export class LayoutComponent {

searchText = '';

public  menu_items = menu_items;

}

Вот мое мнение: Просмотр

<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search in menu">
<div class="sidebar">
  <nav class="sidebar-nav">
    <ul *ngFor="let menu of menu_items | filter : searchText" class="nav" >
      <li class="nav-title text-center">
        <span>{{menu.title}}</span>
      </li>
      <li *ngFor="let child of menu.children" class="{{menu.class}}" >
        <a *ngIf="!child.component" class="nav-link" href="javascript:void(0)" >          <i class="{{child.iconClass}}"> </i> 
        {{child.title}}
        <span *ngIf="child.new" class="badge badge-info">NEW </span>
        </a>
        <ul *ngIf="child.children" class="nav-dropdown-items">
          <li class="nav-item" *ngFor="let childlevel2 of child.children">
            <a class="nav-link"  href="javascript:void(0)" 
              <i class="{{childlevel2.iconClass}}"></i>
              {{childlevel2.title}}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

У меня не так много опыта работы с кастомным каналом. Я искал на форумах и создал подобный фильтр, но он не работает.

Пользовательская труба фильтра

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(item => item.title.includes(searchText));
  }
}

теперь мне нужно, чтобы при вводе любого термина мой фильтр возвращал мне все те массивы (которые в конечном итоге будут элементами моего списка), заголовок которых совпадает с поисковым запросом


person Shehzad    schedule 16.05.2018    source источник
comment
Попробуйте изменить фильтр в вашем представлении на filter : {{searchText}} (добавить фигурные скобки).   -  person anu start    schedule 16.05.2018
comment
Я бы использовал этот модуль github.com/VadimDez/ngx-filter-pipe   -  person Murhaf Sousli    schedule 17.05.2018
comment
Попробуйте использовать Items.map (item = ›item.title) .includes (searchText)   -  person Antonio    schedule 17.05.2018


Ответы (1)


Вы пытались запустить: ## filter: {{searchText}} ##

person Trung Phạm    schedule 30.10.2018