Angular10中如何实现点击按钮动态展示额外数据集的功能

1. 新增所需变量 #

你需要额外新增4个变量存储状态：

• fullResultList：存储接口返回的全量原始数据，所有展示逻辑都基于这个变量截取，不要直接修改
• currentShowCount：存储当前已展示的数据条数，初始默认值为9
• btnStatus：标识按钮的多状态，可选值为more/last/less，分别对应「第一次点更多加9条」「第二次点更多显示全部」「切换回显示更少」三个状态
• isShowBtn：控制按钮是否显示，总数据不足9条时隐藏按钮

2. 修改接口返回后的初始化逻辑 #

替换你原来的代码即可：

// 先存储全量数据
this.fullResultList = response;
const totalCount = this.fullResultList.length;

if (totalCount <= 9) {
  // 总数据不足9条，直接全量展示，隐藏按钮
  this.resultList = this.fullResultList;
  this.isShowBtn = false;
} else {
  // 总数据超过9条，初始化展示前9条
  this.currentShowCount = 9;
  this.resultList = this.fullResultList.slice(0, 9);
  this.isShowBtn = true;
  // 总数据<=18时，第一次点更多就会展示全部，所以初始状态设为last
  this.btnStatus = totalCount <= 18 ? 'last' : 'more';
}

3. 实现按钮点击事件逻辑 #

handleShowBtnClick() {
  const totalCount = this.fullResultList.length;
  switch(this.btnStatus) {
    // 第一次点击显示更多，追加9条
    case 'more':
      this.currentShowCount += 9;
      this.resultList = this.fullResultList.slice(0, this.currentShowCount);
      // 追加后还有剩余数据，下一次点击就显示全部，否则切换为显示更少状态
      this.btnStatus = (totalCount - this.currentShowCount) > 0 ? 'last' : 'less';
      break;
    // 第二次点击显示更多，展示全部数据
    case 'last':
      this.resultList = this.fullResultList;
      this.btnStatus = 'less';
      break;
    // 点击显示更少，回到初始9条的状态
    case 'less':
      this.currentShowCount = 9;
      this.resultList = this.fullResultList.slice(0, 9);
      this.btnStatus = totalCount <= 18 ? 'last' : 'more';
      break;
  }
}

4. 页面按钮渲染规则 #

• 仅当isShowBtn为true时展示按钮
• btnStatus为more或last时，按钮文字显示「显示更多」
• btnStatus为less时，按钮文字显示「显示更少」

说明 #

需要统计当前已展示的数据量时，直接取this.resultList.length或者this.currentShowCount即可，两个值始终一致。

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