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" ... >

这将访问length的{{1}}属性（如果已定义），并且如果dropdownlist为length，则会满足条件。

使用安全访问者可以节省您> 0的链接，因为如果dropdownlist && dropdownlist.length为dropdownlist，它就不会抛出异常。

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>

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

2 个答案: