Angular MatTreeView getElementsByClassName не найден - PullRequest
0 голосов
/ 31 марта 2020

У меня есть MatTreeView, генерирующий красивый TreeView для бокового меню навигации.

После загрузки страницы планируется развернуть узел соответствующей страницы (вместе со всеми родительскими узлами).

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

Поэтому я динамически загружал детали страницы в класс, который должен позволить мне создать массив элементов с помощью getElementsByClassName, а затем передать их в мою функцию expandNode.

Но использование getElementsByClassName не дает результата Результаты.

Ниже мой код:

Шаблон:

<mat-tree [dataSource]="dataSource1" [treeControl]="treeControl1">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="pageID{{node.item_text_link | SpaceToUnderscore }}">
          <button mat-icon-button disabled></button>
          <a *ngIf="node.page_id>1" href="page/{{node.page_id}}">
              {{node.name}}
          </a>
          <div *ngIf="node.page_id<=1">
              {{node.name}}
          </div>
        </mat-tree-node>
...
...
...
</mat-tree>

Контроллер:

expandNode(NodeId)
  {
      let pid = "pageID" + NodeId;
      console.log("Expanding nodes for: " + pid);
      var x = document.getElementsByClassName(pid);
      console.log(x); <------ THIS IS EMPTY
      Array.prototype.forEach.call(x, function(el) {
          console.log(el);
      this.customTreeControl.expandParents(el);
    });
  }

Через инспектора я знаю, что классы есть и правильные (включая орфографию).

Я попытался запустить метод expandNode в функции подписки, которая собирает данные для узлов дерева и устанавливает их в dataSource, так что я знаю, что они не будут вызываться в ближайшее время. Я также добавил кнопку для запуска этой функции, когда все загружены и оставлены на некоторое время, чтобы не было задержки загрузки, и эти классы все еще не найдены.

Скопируйте и вставьте нужное имя класса в поиск инспекторов. Функция находит его, когда я открываю соответствующий элемент.

Почему элементы не видны с getElementsByClassName?

Они скрыты, когда TreeMatView не развернут?

Редактировать: Это просто предложенный способ сделать это. Если есть лучший метод расширения узла и его родителей по ссылке на некоторые данные в этом узле, например, имя класса. Было бы здорово. Имейте в виду, что с этой ссылкой может быть несколько узлов. Я передаю данные в компонент из другого компонента. Например, если я передаю данные страницы «Цветок» (главная страница о цветах), я хочу, чтобы все узлы (и их родители), которые имеют отношение к «Цветку», расширялись. Я использовал идею наличия имени класса pageIdFlower. Сделай массив и обработай соответственно.

Спасибо,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...