HTMLCollection - problem z odczytem clientWidth

0

Witam,

Po 3 tygodniach pracy utknąłem z takim oto problemem:

Mam listę elementów które z kolei zawierają mniejsze elementy.

Obecnie zaczytuję do tablicy obiekty które reprezentują każdy z mniejszych elementów. W obiekcie mam nazwę i szerokość elementu. Obie te rzeczy są zaczytywane z HTMLCollection (name z innerText a width z clientWidth).

Wygląda to tak (zrzut z consoli. 8 elementów. Pierwszy element zawiera dwa mniejsze o nazwie "item1" i "item2" i szerokościach odpowiednio "117" i "89"):

Array(8)
0: Array(2)
0: {name: "item1", width: 117}
1: {name: "item2", width: 89}
length: 2
__proto__: Array(0)
1: [{…}]
2: []
3: []
4: [{…}]
5: [{…}]
6: [{…}]
7: [{…}]
length: 8
__proto__: Array(0)

teraz jeżeli usunę lub dodam jakieś mniejsze elementy w innych "dużych" elementach to dostaje np. coś takiego:

Array(8)
0: Array(2)
0: {name: "item1", width: 117}
1: {name: "item2", width: 0}

Po prostu nie jest czytane clientWidth dla elementu, chociaż on tam jest :(

Czy ktoś wie o co chodzi???

Bardzo proszę o pomoc

0

Pokaż kod z opisywanym efektem.

0
Freja Draco napisał(a):

Pokaż kod z opisywanym efektem.

    const stationsTags = [];
    const stationNativeElements = this.stationItem.toArray();
      
      stationNativeElements.forEach( (item, index) => {
        
        const threeDots = item.nativeElement.children[0].getElementsByClassName('three-dots');
        const tagList = item.nativeElement.children[0].getElementsByClassName('group-card-wrapper');

        stationsTags[index] = [];
        let tagsWidth = 0;
        for (let i = 0; i < tagList.length; i++) {
          const tag = tagList[i];
          const tagName = tag.children[0].children[0].innerText;
          const tagWidth = tag.clientWidth;

          if (!stationsTags[index].some( tag => tag.name === tagName )) {
            stationsTags[index].push({name: tagName, width: tagWidth});
          }

          if (stationsTags[index][i]) {
              tagsWidth += stationsTags[index][i].width;

              if (tagsWidth > cardWidth) {
                tag.classList.remove("open");
                tag.classList.add("close");         
                threeDots[0].classList.remove("close");
                threeDots[0].classList.add("open");
              } else {
                tag.classList.remove("close");
                tag.classList.add("open");                 
                threeDots[0].classList.remove("open");
                threeDots[0].classList.add("close");
              }
        }
      }
      });
0

Na dzień dobry zwraca TypeError: this.stationItem is undefined.

1 użytkowników online, w tym zalogowanych: 0, gości: 1