Javascript 如何修改多级菜单以使用*ngFor&；querySelectorAll？

我一直被困在这个问题上，我无法解决这个问题。我想我可能只是运气不好，因为querySelectorAll不是很。。。棱角分明

我已经从这个codrops将多级菜单实现到一个应用程序中：tympanus.net/codrops/2015/11/17/multi-level-menu/

它工作得很好。非常好

除此之外，当我使用*ngFor创建菜单和子菜单时

  <section class="list">
          <nav id="ml-menu" class="menu">
            <button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button>
            <div class="menu__wrap">

              <ul data-menu="main" class="menu__level">
                <li class="menu__item" *ngFor='let a of data'><a class="menu__link" attr.data-submenu="{{a.name}}">{{a.name}}</a></li>
              </ul>

              <ul attr.data-menu="{{a.name}}" *ngFor='let a of data' class="menu__level">
                <li class="menu__item" *ngFor="let b of a.subdata"><a class="menu__link">{{b.name}}</a></li>
              </ul>
            </div>
          </nav>
        </section>        

当我手工编写html菜单时，结果是：

当我使用*ngFor时，我得到：

有人能帮我找出原因吗？我还在ngAfterViewInit中运行build菜单命令

数据采用以下格式（在组件服务中映射）：

---

等等。

之所以会发生这种情况，是因为您要在DOM注入元素之前访问DOM

如果您需要建议，请尽量避免直接访问DOM，这不仅不利于可移植性，而且也很危险，而且会带来很多麻烦

一种更好（更高效、更优雅、更具角度感）的方法是使用ViewChildren装饰器。首先，必须使用变量引用模板元素：

 <ul 
    #level 
    attr.data-menu="{{a.name}}" 
    *ngFor='let a of data' 
    class="menu__level">
      <li 
         class="menu__item" 
         *ngFor="let b of a.subdata"><a class="menu__link">
            {{b.name}}
       </li>
 </ul>

或者将您的查询列表转换为数组（您在问题中是如何尝试的）：

---

将有助于看到更多的组件。什么是“数据”？鉴于

菜单级
元素是动态创建的，我猜在查询它们时它们还不存在。或者说，
this.el
并不指向您认为它的功能——记住angular确实查看封装，除非您明确禁用它。添加了数据，这样对您来说就更清晰了。我同意它们可能还不存在，但是
el=document.getElementById（'ml-menu'）这将返回具有所有完整选项的相同对象——据我所知。它返回可像元素一样展开的
。
0 : name: "Name1"
    subdata: Array(3)
    0:{name: "Apple", score: true, id: "pi-cc"}
    1:{name: "Banana", score: true, id: "pi-01"}
    2:{name: "Orange", score: true, id: "pi-02"}
1 : name: "Name2"
    subdata: Array(3)
    0:{name: "Red", score: true, id: "pj-cc"}
    1:{name: "Blue", score: true, id: "pj-01"}
    2:{name: "Green", score: true, id: "pj-02"}

 <ul 
    #level 
    attr.data-menu="{{a.name}}" 
    *ngFor='let a of data' 
    class="menu__level">
      <li 
         class="menu__item" 
         *ngFor="let b of a.subdata"><a class="menu__link">
            {{b.name}}
       </li>
 </ul>

@ViewChildren('level', {read: ElementRef}) levels: QueryList<ElementRef>;

ngAfterViewInit(){
  let firstLevel = this.levels._results[0].nativeElement;
}

ngAfterViewInit(){
  this.menus = this.levels
                 .toArray()
                 .map(el => el.nativeElement);
}