Question

我正在尝试为动态过滤器创建一个占位符文本回退，但无法使其正常工作，并且不确定它是否真的可以实现？

过滤器代码为：

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

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

Answer 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

如果您希望它更优雅，那么您可以在组件方面对数组进行排序，然后使用它。

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

1 个答案:

更新