如何修改多级菜单以与* ngFor和querySelectorAll一起使用？

Question

I've been stuck on this forever, and I cannot figure out the issue. I think I may just be out of luck as querySelectorAll isn't very ... angular.

I have implemented the multi-level-menu into an application from this codrops: tympanus.net/codrops/2015/11/17/multi-level-menu/

It works great. Perfectly.

EXCEPT, when I use *ngFor to create the menus and sub menus.

  <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>        

The point of contention is this line of javascript, using queryselectorall to get the menu levels:

 this.menus = [].slice.call(this.el.querySelectorAll('.menu__level'));

When I hand code the html menus, I get this as the result:

https://imgur.com/Uledknr

When I use *ngFor I get this:

https://imgur.com/KBNZUhm

Can anyone help me figure out why? I'm running the build menu command in ngAfterViewInit as well.

Data is in the following format (it gets mapped in the component service):

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"}

etc.

Answer 1

This happens because you're accessing the DOM before that Angular can inject the elements.

If you want an advice, avoid direct access to the DOM as much as possible, it's not only wrong for portability but it also dangerous and it brings a lot of troubles.

A better (more efficient, more elegant, more Angular ) way to accomplish it, is using the ViewChildren decorator. Firstly, you have to reference your template elements with a variable:

 <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>

Then you have to require the reference in the component:

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

Then you can use the variable to get the template of any level:

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

Or convert your QueryList into an Array (how you tried in your question):

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