Angular 7 ngIf материализовать раскрывающийся список

У меня есть раскрывающийся список в angular с материализацией, и он работает нормально, но если я добавлю, например, директиву * 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>

angular dropdown angular7 angular-ng-if
person Web Convert    schedule 05.11.2018    source источник
comment
удалить нгиф   -  person Roj    schedule 05.11.2018
comment
но мне нужно, чтобы ngIf добавил условие   -  person Web Convert    schedule 05.11.2018
comment
Что произойдет, когда вы нажмете на ссылку - ваш код говорит, что *ngIf всегда верно, вы делаете так, чтобы тег привязки всегда отображал true   -  person Rahul    schedule 05.11.2018
comment
затем добавьте условие. Обратите внимание, что это должно быть логическое значение, инициализированное в вашем машинописном файле. например show: boolean; , а затем в вашем конструкторе this.show = false . затем используйте show в качестве условия. Я не понимаю, почему это не должно работать   -  person Roj    schedule 05.11.2018
comment
Да, когда ngIf имеет значение true, ссылка видна, но когда я нажимаю на нее, раскрывающийся список не открывается   -  person Web Convert    schedule 05.11.2018
comment
попробуйте создать ‹ng-контейнер *ngIf=CONDITION› и поместите в него все выпадающее меню и закройте тег. если все еще не работает, попробуйте удалить data-target=drop и добавить (щелчок) с функцией управления раскрывающимся списком при нажатии   -  person m.akbari    schedule 05.11.2018

Ответы (3)


arrow_upward
1
arrow_downward

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

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

}
person Web Convert    schedule 06.11.2018

arrow_upward
0
arrow_downward

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

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

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

person Rahul    schedule 05.11.2018

arrow_upward
0
arrow_downward

Сначала установите ngx-materialize, после чего вы сможете использовать компонент, как показано ниже.

<mz-dropdown
  [id]="'dropdown-demo'"
  [align]="'left'"
  [belowOrigin]="false"
  [constrainWidth]="true"
  [dropdownButtonId]="'btn-dropdown-demo'"
  [gutter]="true"
  [hover]="true"
  [inDuration]="300"
  [outDuration]="300"
  [stopPropagation]="true"
>
  <mz-dropdown-item><a href="#!">One</a></mz-dropdown-item>
  <mz-dropdown-item><a href="#!">Two</a></mz-dropdown-item>
  <mz-dropdown-divider></mz-dropdown-divider>
  <mz-dropdown-item><a href="#!">Three</a></mz-dropdown-item>
</mz-dropdown>

<a mz-button id="btn-dropdown-demo" href="#">Dropdown</a>

Дополнительную информацию вы можете найти на этом сайте https://sherweb.github.io/ngx-materialize/dropdown

Подробнее о ngx-materialize здесь https://www.npmjs.com/package/ngx-materialize

person Jerzy Drożdż    schedule 28.12.2019