Угловой 7 нг Если материализовать выпадающий - PullRequest
Новая
       19

Угловой 7 нг Если материализовать выпадающий

0 голосов
/ 05 ноября 2018

У меня есть раскрывающийся список в angular с materialize, и он работает нормально, но если я добавлю, например, директиву * ngIf в триггер выпадающего списка, класс ul.dropdown-content больше не будет отображаться. Пожалуйста, помогите мне, что я должен сделать, чтобы открыть раскрывающийся список, когда я нажимаю на него. Спасибо! 

<div class="container">
    <div class="row">
        <div class="col s4">

            <a *ngIf="true"  class="dropdown-trigger" data-target="drop">Language<i class="material-icons right ml-0">arrow_drop_down</i></a>

            <!-- Dropdown Structure -->
            <ul id="drop" class="dropdown-content">
                <li><a href="#!">English</a></li>
                <li><a href="#!">German</a></li>
                <li><a href="#!">Spanish</a></li>        
            </ul>
        </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Он не работает с ng-контейнером, но если я переместлю материализацию выпадающего javascript из ngOnInit в ngAfterViewInit, выпадающий список работает, когда я нажимаю на него, и я не понимаю, почему. Вы можете это объяснить? Спасибо! 

ngAfterViewInit() {
  const elemDropdown = document.querySelectorAll('.dropdown-trigger');
  M.Dropdown.init(elemDropdown, {
    coverTrigger: false
  });
}
ngOnInit() {

}
0 голосов
/ 05 ноября 2018

Переместите директиву *ngIf внутрь <ng-container *ngIf='true'></ng-container> и свой тег привязки внутри контейнера, это может сработать - но факт *ngIf удалит элемент непосредственно из DOM, но не скрывает элемент из DOM

Если приведенный выше сценарий не работает, используйте привязку свойства [hidden]='false' и сделайте его истинным, если хотите скрыть ссылку - просто посмотрите https://angular.io/guide/structural-directives#ngif-case-study

Спасибо - Счастливого кодирования !!

...