Angular 7 ngIf 实现下拉答案

【问题标题】：Angular 7 ngIf materialize dropdownAngular 7 ngIf 实现下拉
【发布时间】：2018-11-05 07:26:07
【问题描述】：

我有一个带具体化的角度下拉菜单，它工作正常，但如果我在链接下拉触发器中添加例如 *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>

【问题讨论】：

删除 ngif
但我需要 ngIf 来添加条件
当您点击链接时会发生什么 - 您的代码显示 *ngIf 始终为真您正在使锚标记始终显示为真
然后添加条件。请注意，它应该是在您的打字稿文件中初始化的布尔值。例如 show: boolean; ，然后在您的构造函数中 this.show = false 。然后使用show 作为您的条件。我不明白为什么这不起作用
是的，当 ngIf 为 true 时，链接可见，但是当我点击它时，它不会打开下拉菜单

标签： angular dropdown angular-ng-if angular7

【解决方案1】：

它不适用于 ng-container，但是如果我将 javascript 下拉列表从 ngOnInit 移动到 ngAfterViewInit，当我单击它时下拉列表会起作用，但我不明白为什么。你能解释一下吗？谢谢！

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

}

【讨论】：

【解决方案2】：

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

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

谢谢 - 编码愉快！！

【讨论】：

【解决方案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

【讨论】：