如何在Angular中访问管道结果以在不同的元素中使用?

Question

我想展示"没有项目显示"在搜索时显示。但它不起作用。我无法找出数组对象的长度。所以，如何找到它。如果有人知道，请帮助解决方案。更多信息请查看我的演示。

<div *ngIf="!__allprdts">
No items to display
</div>

For Demo: https://stackblitz.com/edit/angular-selvam-ecommerce-task-sxkdrh?file=src%2Fapp%2Fdirectives%2Fproductslist.dir.ts

Answer 1

您可以将管道数组的结果存储在范围为ng-container的变量中，并使用其长度有条件地显示消息:

这是更新后的stackblitz

<ng-container *ngIf="(__allprdts
| filter: __searchedProduct
| sortBy: sortByOption
| paginate: config) as result">

经过筛选、排序、分页的数组将存储为result

现在可以使用result的长度

<div *ngIf="result.length === 0">
No items to display
</div>