Question

我有一个与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>

Answer 1

它不适用于ng-container，但是如果将javascript下拉列表从ngOnInit移至ngAfterViewInit，则单击该下拉列表即可，但我不明白为什么。你能解释一下吗？谢谢！

Recognized File Types

Answer 2

将*ngIf指令移至<ng-container *ngIf='true'></ng-container>内，并将锚标记移至容器内，这可能会起作用-但事实是*ngIf会直接从DOM中删除元素，但不会从DOM中隐藏元素

如果上述情况不起作用，请使用[hidden]='false'属性绑定，如果要隐藏链接，请设置为true-看看https://angular.io/guide/structural-directives#ngif-case-study

谢谢-编码愉快！！

Answer 3

首先安装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

Angular 7 ng如果实现下拉

3 个答案: