Question

下面是我的问题的简要摘要，因此您不必阅读问题。

我正在使用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编译的，我不知道他们是如何做到的，换句话说，like this不能正常工作，我没有直接访问权限到侧边栏的列表中，我无法将其包装在div标签中，它包含在自己编译的标签中，到目前为止，我尝试了8种不同的解决方案，但没有任何效果。

简短摘要

我无需执行this answer就可以实现

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

因为该数组位于</app-sidebar><app-sidebar>组件内部，所以我无法编辑该侧边栏的编译代码。

Angular 6 CoreUI：如何添加侧边栏过滤器搜索？

0 个答案: