Question

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

我希望如果管道返回空数组，我的显示区域应显示div＆＃39;找不到记录＆＃39;。我怎么能这样做。

.down-arrow-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 0 0 3px
}

.down-arrow {
  background-image: url("https://i.stack.imgur.com/uiDSf.png");
  width: 10px;
  height: 10px;
  display: inline-block;
  float: right;
  margin: 3px 0 0
}

.checkbox-list {
  width: 138px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid rgb(226, 226, 226);
  background-color: #fff;
  margin: 0;
  padding: 5px;
  position: absolute;
  top: 22px;
  right: 0
}

.checkbox-list > li {
  width: 100%;
  list-style: none;
  padding: 5px 0 0;
  text-align: left;
  vertical-align: top;
  color: rgba(84, 84, 84, 0.8);
  font-weight: 400
}



.checkbox-list > li label {
  color: rgba(84, 84, 84, 0.8);
  font-weight: 400;
  font-size: 12px
}


.checkbox-list .btn {
  width: 100%;
  display: block;
  margin: 0 0 5px;
  font-size: 13px
}

在上面的代码中点击 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

遵循此article，更好的方法是：

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

使用* ngIf和angular4自定义管道

2 个答案: