页面菜单中显示的 Ngb 分页和（当前）消息的可观察元素的长度

Question

我正在 angular 项目中工作，并尝试向其中添加 ngb-pagination。我显示的列表有一个 Observable 类型，所以我不确定我应该如何为 ngb-pagination 的 [collectionSize] 属性获取它的长度。

我宣布我的列表为

public productosList$!:Observable<any[]>;

我发现我无法得到它的长度

(productosList$ | async)?.length

但是，当我尝试将其作为 [currentSize] 值传递时，出现此错误：

Type 'number | undefined' is not assignable to type 'number'

有什么方法可以对这个错误进行排序，或者有其他方法来获取 Observable 列表长度吗？

额外:

与上述问题无关，当我的分页器呈现时，它在页面菜单的活动页面中显示“（当前）”消息，如下所示

我怎样才能摆脱它？我一直在搜索，我认为它应该被隐藏，但在我的情况下它不是。我的ngb-pagination菜单代码如下：

  <ngb-pagination class="d-flex justify-content-center"
  [(page)]="page"
  [pageSize]="pageSize"
  [collectionSize]="(productosList$ | async)?.length">
  </ngb-pagination>

提前感谢您的帮助

Answer 1

问题是：

(productosList$ | async)?.length

由于 ?，

属于 number | undefined 类型。如果 productosList$ | async 未定义或为空，则表达式将为未定义或为空。如果已定义，则将读取长度属性。

要修复它，也许你可以这样做：

[collectionSize] = "(productosList$ | async) ? (productosList$ | async).length : 0"

这样，如果它 (productsList$ | async) 存在，它将是长度，如果不存在，它将是 0。

对于删除（当前），也许您可以添加 CSS 显示样式：none 或可见性：为该元素隐藏。

似乎有关于它的讨论：https://github.com/ng-bootstrap/ng-bootstrap/issues/3870但我不确定如何完成它。

页面菜单中显示的 Ngb 分页和（当前）消息的可观察元素的长度

Lenght of an observable element for Ngb Pagination and (Current) Message showing in page menu

observable

ng-bootstrap

angular

ngb-pagination