Angular 2+ - 检查Pipe是否返回原始列表的空子集

Question

我有一个我想要迭代的字符串列表,但我希望能够使用搜索词来过滤它们.像这样:

<div *ngFor="#item in list | search: searchTerm">{{ item }}</div>

我的问题是:如何检查管道是否返回列表的空子集？

换句话说,如果所有字符串都不匹配搜索词,我想显示一条消息:"No matches".

Answer 1

<div *ngIf="(list | search: searchTerm).length === 0">
  "No matches"
</div>
<div *ngFor="#item in list | search: searchTerm">{{ item }}</div>

或者,您可以修改管道以返回指示列表为空的特定标记

@Pipe({
  name: 'search'
})
export class SearchPipe {

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

<ng-container *ngFor="let item of list | search: searchTerm">
  <div *ngIf="item === -1">"No matches"</div>
  <div *ngIf="item !== -1">{{ item }}</div>
</ng-container>

Answer 2

实现此目的的另一种方法是检查子元素的html元素,或者在我的情况下检查行的表格.

<table #myTable>
  <tr *ngFor="let item of list | somePipe : searchText">
      <td>{{ item.name }}</td>
  </tr>
</table>

<p *ngIf="!myTable.rows.length">No results</p>

Answer 3

可以将依赖注入利用到管道中.你可以注入组件:

然后你可以在它上面设置一个属性来通知这个:

@Pipe({
  name: 'search'
})
export class SearchPipe {
  constructor(@Inject(forwardRef(() => SomeComponent)) private comp:SomeComponent) {

  }

  transform(value) {
    var filtered = value.map((v) => v-1);
    this.comp.isEmpty = (filtered.length === 0);
    return filtered;
  }
}

主要缺点是您在组件内链接管道.优点是过滤执行一次.

Answer 4

这是我的代码，对@GünterZöchbauer进行了一些修改

<div  *ngFor="let filter_list of list | FilterItem" >
    <div *ngIf=" filter_list == -1 " class="alert alert-info">No item found</div>    
    <div *ngIf="filter_list !== -1" *ngFor="let item of filter_list  ; let i = index;" >
        {{ item }}
    </div>
</div>

管道编号

@Pipe({
  name: 'FilterItem'
})
export class FilterItem {

  transform(list, args?) {
       let result = ...; 
       if ( result && result.length > 0 ){
          return [ result ];
       }else{
          return [ -1 ];
       }
  }
}