Как получить ширину дочерних элементов из htmlelement (elementref)

Question

Мне нужно получить ширину всех дочерних элементов из elementref.

Элементы загружаются динамически

Машинопись:

@ViewChild('mainSubMenu') subMenu: ElementRef;

ngAfterViewInit() {
    const greedyNav = this.subMenu.nativeElement;
    let totalSpace = 0;
    let breakWidths = [];
    let itemCount = 0;

   // Loop over all elements and set sum of widths for each menu item
   for (const i of greedyNav.children) {
     totalSpace += greedyNav.children[i].clientWidth;
     breakWidths.push(totalSpace);
     itemCount += 1;
     }
   }

HTML:

   <nav class="sub-nav-tabs">
    <ul class="main-sub-menu" #mainSubMenu>
      <li class="sub-menu-item" *ngFor="let menuItem of menuitems">
        <a class="sub-menu-link">{{menuItem.item}}</a>
      </li>
    </ul>
  </nav>

Answer 1

Измените свой метод как:

ngAfterViewInit() {
    const greedyNav = this.subMenu.nativeElement;
    let totalSpace = 0;
    let breakWidths = [];
    let itemCount = 0;

  // Loop over all elements and set sum of widths for each menu item
  for (const eachChild of greedyNav.children) {
    totalSpace += eachChild.clientWidth;
    breakWidths.push(totalSpace);
    itemCount += 1;
    }
  }

Вы зацикливаете свой массив с помощью оператора of, поэтому вы получаете в каждом цикле самодетский ребенок, а не индекс.