使用*ngIf和angular4自定义管道

Question

我正在使用一个自定义管道,根据数组字符串(电话目录样式)中的第一个字母表过滤数组.每当我更改字母表参数时,管道返回已过滤的数组,并使用*ngFor显示它.如果没有找到匹配,则返回空数组,我的diplay为空白.

我希望如果管道返回空数组我的显示区域应显示div'找不到记录'.我怎样才能做到这一点.

<div *ngIf="currentList.length > 0; else nodata" id="outerContainer">
    <div id="listContainer">
        <div class="listItem" *ngFor="let list of currentList | listFilter : listfilterChar" (click)="openContactList()">
            <div class="listInfo">
              <h3>
                {{list.Name}}
              </h3>
          </div>
    </div>
    <div id="alphabetContainer">
      <p *ngFor="let letter of alphabetArray">
        <span class="alphabetContainer" (click)='setListFiltercharacter($event)'>{{letter}}</span>
      </p>
    </div>
  </div>

在上面的代码中点击span.alphabetContainer,变量listfilterChar用字母表更新,管道过滤数组.但如果找不到匹配的初始字母显示区域的联系人仍为空白.

Answer 1

试试吧

<div class="listItem" *ngFor="let list of currentList | listFilter : listfilterChar" (click)="openContactList()">
    <div class="listInfo">
        <h3>
            {{list.Name}}
        </h3>
    </div>
</div>
<div *ngIf="(currentList | listFilter : listfilterChar).length === 0">
    "No record found"
</div>

Answer 2

在这篇文章之后，一个更好的方法是这样做：

<ng-container *ngIf=”(currentList | listFilter : listfilterChar) as result”>

  <div *ngFor=”let item of result”>
    {{item}}
  </div>

  <b *ngIf="!result.length">No record found</b>

</ng-container>