* 2のdivコンテンツを表示するトグルとして* ngIfを使用

Question

私はドロップダウンボックスを含むdivを持っています。デフォルトでは、ドロップダウンボックスは空で、ユーザがビューページから項目を削除するときにのみ設定されます。リストが空のときに表示されないように、そしてリストに少なくとも1つのアイテムがあると表示されるように、この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> 

iは、ドロップダウン内の項目の長さに応じて、div要素の表示を切り替えるには、この使用* ngIfを実装することができますか。

Answer 1

はsafe navigation operatorと*ngIfの組み合わせを使用します。

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

これは、それが定義されている場合、dropdownlistのlengthプロパティにアクセスし、lengthが> 0であれば条件を満たします。

セーフアクセサーを使用すると、dropdownlistがundefinedの場合に例外をスローしないので、dropdownlist && dropdownlist.lengthをチェーンする必要がありません。

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>