Angular 8结合Angular Material实现点击加载更多复选框功能的方法

1. 组件类（.ts文件）修改 #

新增控制显示数量的变量和加载逻辑：

import { Component } from '@angular/core';

@Component({
  // 保持你原有的组件元配置不变
})
export class YourComponent {
  // 原有存储全量数据的列表
  dataList: any[] = [/* 你的全部数据内容 */];
  // 控制当前展示的条目数，初始值设为3
  displayCount = 3;

  loadMore(): void {
    // 每次新增3条展示量，最大值不超过总数据长度
    this.displayCount = Math.min(this.displayCount + 3, this.dataList.length);
  }
}

2. 模板（.html文件）修改 #

使用Angular自带的SlicePipe做列表切片渲染，新增加载触发按钮：

<!-- 仅渲染当前需要展示的条目 -->
<ng-container *ngFor="let data of dataList | slice:0:displayCount">
  <mat-checkbox>{{data}}</mat-checkbox>
</ng-container>

<!-- 加载更多按钮，全部数据展示完成后自动隐藏 -->
<button 
  mat-button 
  *ngIf="displayCount < dataList.length" 
  (click)="loadMore()"
>
  加载更多
</button>

逻辑说明 #

• 页面初始化时displayCount为3，默认仅渲染前3条数据对应的复选框
• 每次点击加载按钮，展示数量自动+3，同步多渲染3条复选框
• 当展示数量等于总数据长度时，加载按钮自动隐藏，完成全量数据展示
• 该方案依赖Angular内置能力，无需引入额外依赖，完全兼容Angular 8和对应版本的Angular Material

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