使用* ngIf和angular4自定义管道

发布时间：2020-12-17 06:52:09 所属栏目：安全来源：网络整理

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

我正在使用一个自定义管道,根据数组字符串(电话目录样式)中的第一个字母表过滤数组.每当我更改字母表参数时,管道返回已过滤的数组,并使用* 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用字母表更新,管道过滤数组.但如果找不到匹配的初始字母显示区域的联系人仍为空白.

解决方法

试试吧

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!