Angular 6 CoreUI: как добавить фильтр поиска на боковой панели? - PullRequest
Новая
       10

Angular 6 CoreUI: как добавить фильтр поиска на боковой панели?

0 голосов
/ 27 октября 2018

Краткое описание моего вопроса приводится ниже, в конце, чтобы вам не приходилось читать вопрос.

Я использую Angular 6 и coreui-free-angular-admin-template , я хотел бы создать фильтр поиска для элементов боковой панели. Я создаю меню, как это 

    interface Menu {
      name: string;
      url: string;
      icon: string;
    }

    if (localStorage.getItem('data') !== null) {
      const data = JSON.parse(localStorage.getItem('data'));
      this.item = data.body.response;

      for (let i = 0; i < this.item.menu.length; i++) {
        const menuItem = {} as Menu;

        // if the user goes to the homepage redirect him to /dashboard, the homepage id is 102 according to the api, it's the bots page
        // else redirect him to /page, and you have to remove the first character, the hashtag #
        if (this.item.menu[i] && this.item.menu[i].section === 'left_menu') {
          menuItem.name = this.item.menu[i].title;
          if (this.item.menu[i].id === 102) {
            menuItem.url = '/dashboard';
          } else {
            menuItem.url = this.item.menu[i].menu_url.substring(1);
          }
          menuItem.icon = this.item.menu[i].class_name;
          this.navItems.push(menuItem);
        }

      }
    }
    this.changes = new MutationObserver((mutations) => {
      this.sidebarMinimized = document.body.classList.contains('sidebar-minimized');
    });

    this.changes.observe(<Element>this.element, {
      attributes: true
    });
  }

Компонент 

  <app-sidebar [fixed]="true" [display]="'lg'">
    <app-sidebar-header>
    </app-sidebar-header>
    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar]></app-sidebar-nav>
    <app-sidebar-footer>
      <li class="nav-item" ng-reflect-ng-class="nav-item">
        <a routerlinkactive="active" class="nav-link" href="../logout">
          <i class="nav-icon fa fa-lock"></i> Logout
        </a>
      </li>
    </app-sidebar-footer>
  </app-sidebar>

Js массив выглядит так 

0: {name: "Dashboard", url: "/dashboard", icon: "icon-speedometer"}

HTML выглядит так: 

class="nav">
<li class="nav-item" ng-reflect-ng-class="nav-item"><!--bindings={
  "ng-reflect-ng-if": "true",
  "ng-reflect-ng-if-else": "[object Object]"
}--><a routerlinkactive="active" class="nav-link active" ng-reflect-ng-class="nav-link" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><i class="nav-icon icon-speedometer"></i> Dashboard <!--bindings={
  "ng-reflect-ng-if": "false"
}--></a><!----></li>
</ul>

Проблема в том, что все внутри </app-sidebar><app-sidebar> скомпилировано с помощью corui, и я понятия не имею, как они это сделали, иными словами, что-то как это не будет работать, у меня нет прямого доступ к списку боковой панели, и я не могу обернуть его в теги div, он содержится в его собственных тегах, которые скомпилированы, пока я пробовал 8 различных решений, ничего не работает.

Краткое резюме

Мне нужна реализация этого ответа без необходимости 

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

Поскольку массив находится внутри </app-sidebar><app-sidebar> компонента, и я не могу редактировать скомпилированный код этой боковой панели.

...