角度动态过滤器占位符/后备文本？答案

【问题标题】：Angular dynamic filter placeholder/fallback text?角度动态过滤器占位符/后备文本？
【发布时间】：2017-12-31 07:59:08
【问题描述】：

我正在尝试为动态过滤器创建占位符文本后备，但无法使其正常工作并且不确定它是否真的可行？

过滤代码为：

*ngFor="let example of scale.examples | filter:{type: 'solo'}

如果过滤器类型不匹配，我希望能够指定占位符/备用文本。

【问题讨论】：

回退到底是什么意思？你是说如果过滤器返回 0 个结果，那么你想显示一些占位符文本？
是 AngularJS 还是 Angular？你的标题是 AngularJS，但代码是 Angular 的！！
是的，如果过滤器返回零结果，则会出现一些占位符文本。这是 Angular 4，我在 Ionic 3 应用程序中使用它。谢谢。

标签： angular filter filtering fallback

【解决方案1】：

您几乎可以在任何地方应用管道。所以你可以这样做：

<div *ngIf="(scale.examples | filter:{ 'type': 'solo' }).length === 0">No Values</div>
<div *ngFor="let example of scale.examples | filter:{ 'type': 'solo' }">
   {{example.value}} 
</div>

这是一个正常工作的 Plunker： https://plnkr.co/edit/LxRRTdFL4dI9QwjmX3WY?p=preview

更新

如果您不想对数组进行两次排序的开销，您可以使用新的 ngIf else 语法：

<div *ngIf="(myArr | filter:{ 'type': 'triple' }); let filteredArr" style="color: blue;">
  <div *ngIf="filteredArr.length === 0">No Results</div>
  <div *ngFor="let myObj of filteredArr" style="color: blue;">
    {{myObj.value}} 
  </div>
</div>

这是一个正常工作的 Plunker：https://plnkr.co/edit/MaipzWGZ06ViG1WNzDVW?p=preview

如果您希望它更优雅，最好在组件端对数组进行排序并使用它。

【讨论】：

谢谢，这行得通（我已经实现了），但是我想知道是否有更清洁的方法来做到这一点？
我也添加了另一种方法来做到这一点
谢谢，非常感谢。