javascript - 使用 *ngIf 作为切换以 Angular 2 显示 div 内容

Question

我有一个包含下拉框的 div，默认情况下下拉框为空，并且仅在用户从 View 页面中删除项目时填充。我希望这个 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 的显示。

Answer 1

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

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

这将访问 dropdownlist 的 length 属性(如果已定义)，并且如果 length 为 则满足条件> 0.

使用安全访问器可以让您不必链接 dropdownlist && dropdownlist.length，因为如果 dropdownlist 为 未定义，它不会抛出异常.