ngb-pagination绑定异步过滤集合时无法识别collectionSize问题咨询

步骤1：修改TS文件，新增过滤结果计数变量并同步更新 #

在组件类中新增一个普通同步变量存储过滤后的用户总数，所有更新filteredUsers流的位置同步更新该计数即可：

新增计数变量 #

在组件属性声明部分新增如下代码：

// 原有属性
public filteredUsers:  ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
// 新增：存储过滤后的用户总条数
public filteredUsersCount: number = 0;

修改getUsers方法，首次加载时同步计数 #

getUsers() {
  this.dataService.getUsers().subscribe({
    next: (users) => {
      console.log('Received users:', users);
      this.users = users;
      this.filteredUsers.next(this.users);
      // 同步更新总条数
      this.filteredUsersCount = this.users.length;
      // 可选优化：校验当前页码合法性，避免出现空页
      this.adjustPageIfNeeded();
    },
    error: (error) => {
      console.log('Received error downloading users:', error);
    }
  })
}

修改search方法，搜索时同步计数 #

search(){
  console.log("Search invoked");
  let search = this.searchCtrl.value;
  console.log("Search term is:",search);
  if (!search) {
    console.log("Search is empty");
    const result = this.users.slice();
    this.filteredUsers.next(result);
    // 同步更新总条数
    this.filteredUsersCount = result.length;
    this.adjustPageIfNeeded();
    return;
  } else {
    console.log("Filtered media is:",this.filteredUsers);
    console.log("Search is:",search);
    search = search.toLowerCase();
  }

  const result = this.users.filter(user => (
    user.name.toLowerCase().indexOf(search) > -1 ||
    user.lastname.toLowerCase().indexOf(search) > -1
    )
  );
  this.filteredUsers.next(result);
  // 同步更新总条数
  this.filteredUsersCount = result.length;
  this.adjustPageIfNeeded();
}

（可选）新增页码校验方法 #

避免搜索/删除后当前页码超过总页数导致页面为空：

private adjustPageIfNeeded() {
  const maxPage = Math.ceil(this.filteredUsersCount / this.pageSize);
  if (this.page > maxPage && maxPage > 0) {
    this.page = maxPage;
  } else if (maxPage === 0) {
    this.page = 1;
  }
}

修改deleteRow方法，删除用户后同步更新 #

deleteRow(id) {
  for (let i = 0; i < this.users.length; ++i) {
    if (this.users[i].id === id) {
      this.users.splice(i, 1);
    }
  }
  // 重新触发搜索，同步过滤结果和总条数
  this.search();
}

步骤2：修改HTML分页组件绑定 #

将分页组件的collectionSize属性绑定为我们新增的同步计数变量即可：

<ngb-pagination [(page)]="page"
[pageSize]="pageSize"
[collectionSize]="filteredUsersCount" aria-label="Default pagination"></ngb-pagination>

修改后分页组件可以实时获取到最新的过滤结果总条数，页码会随搜索/删除操作动态更新。

内容的提问来源于stack exchange，提问作者Kerby82