使用 *ngIf 作为切换以角度 2 显示 div 内容答案

【问题标题】：using *ngIf as a toggle to display div content in angular 2使用 *ngIf 作为切换以角度 2 显示 div 内容
【发布时间】：2017-08-23 08:06:36
【问题描述】：

我有一个包含下拉框的 div，默认情况下，下拉框是空的，并且仅在用户从视图页面中删除项目时才会填充。我希望这个 div 与下拉列表在列表为空时不可见，并且在列表至少有 1 个项目时显示。

<div class="btn-group bootstrap-select show-tick">
   <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" (click)="toggleSelect()">
       <span class="pull-left">List Items</span>&nbsp;
       <span class="bs-caret ">
           <span class="caret "></span>
       </span>
   </button>
        <ul class="dropdown-menu multi-select-popup " [ngStyle]="{display:isOpen ? 'block' : 'none'} " style="display:block; ">
            <li *ngFor="let item of dropdownlist; let i = index ">
                <a (click)="select(item, i) " class="dropdown-item ">
                    <i class="fa fa-fw " [ngClass]="{ 'fa-check': item.checked, 'glyphicon-none': !item.checked} "></i>
                    <span [innerHtml]="item.title "></span>
                </a>
            </li>
        </ul>
    </div>

我如何使用 *ngIf 来实现这一点，以根据下拉列表中项目的长度切换 div 的显示。

【问题讨论】：

*ngIf="dropdownlist.length"

标签： javascript jquery html angular

【解决方案1】：

使用safe navigation operator 和*ngIf 的组合：

<ul *ngIf="dropdownlist?.length > 0" ... >

这将访问dropdownlist 的length 属性（如果已定义），并且如果length 是> 0 则满足条件。

使用安全访问器无需链接dropdownlist && dropdownlist.length，因为如果dropdownlist 是undefined，它不会引发异常。

【讨论】：

【解决方案2】：

<div class="btn-group bootstrap-select show-tick">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-default" (click)="toggleSelect()">
    <span class="pull-left">List Items</span>&nbsp;
    <span class="bs-caret ">
        <span class="caret "></span>
    </span>
</button>
      <ul *ngIf="dropdownlist?.length" class="dropdown-menu multi-select-popup " [ngStyle]="{display:isOpen ? 'block' : 'none'} " style="display:block; ">
          <li *ngFor="let item of dropdownlist; let i = index ">
              <a (click)="select(item, i) " class="dropdown-item ">
                  <i class="fa fa-fw " [ngClass]="{ 'fa-check': item.checked, 'glyphicon-none': !item.checked} "></i>
                  <span [innerHtml]="item.title "></span>
              </a>
          </li>
      </ul>
  </div>

【讨论】：