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

Question

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

<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是undefined它不会抛出异常。

Answer 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>