如果搜索过滤器为空，则显示一条消息

Question

在 Angular 4 中，我正在尝试迭代一个程序数组。并且还添加了搜索管道。如果未找到搜索，我想显示一条消息。

我该如何处理这个问题？

这是 ngFor

<div class="col-sm-6 col-md-4" *ngFor="let programme of programmes | search: searchText">
    <programme [programme]="programme"></programme>
  </div>

我知道我不能同时使用ngIf和ngFor。有什么方法可以让我使用ngIfElse吗？如果没有找到搜索，则显示一条消息？

Answer 1

在管道中，如果结果为空，您可以返回 -1 或某个值

 transform(value, searchTerm) {
    let result = ...
    if(result.length === 0) {
      return [-1];
    }
    return result;
  }

在您的html代码中，您可以像

<ng-container class="col-sm-6 col-md-4" *ngFor="let programme of programmes | search: searchText">
  <div *ngIf="item === -1">"No matches"</div>
  <div *ngIf="item !== -1"><programme [programme]="programme"></programme></div>
</ng-container>