Angular中基于复选框切换表格数据及ngAfterViewInit调用问题

背景说明 #

页面初次加载时需展示当前用户的表格视图，现已添加mat-checkbox复选框：勾选时表格更新为所有用户列表，取消勾选则仅显示当前用户详情。相关代码如下：

HTML代码 #

<mat-checkbox (change)="showAllUsers($event)">
  Show All
</mat-checkbox>

TypeScript代码 #

showAllUsers(event: MatCheckboxChange){
  if(event.checked){
    this.getUsers();
  } else {
    this.getUsersById();
  }
}

// 尝试在ngAfterViewInit中调用该函数（存在错误）
ngAfterViewInit(){
  this.showAllCompanies($event.);
}

问题1：当前的实现方式是否正确？ #

整体逻辑方向是对的，但存在几个细节问题和优化点：

• 函数调用错误：ngAfterViewInit里写的showAllCompanies是笔误，应为showAllUsers；且$event.的写法完全错误，组件初始化阶段没有可用的$event对象。
• 初始状态不明确：当前mat-checkbox未设置初始勾选状态，虽默认未勾选符合"初始显示当前用户"的需求，但显式添加[checked]="false"能让代码逻辑更清晰，避免依赖组件默认行为：

  <mat-checkbox (change)="showAllUsers($event)" [checked]="false">
    Show All
  </mat-checkbox>
  

• 可维护性优化：建议绑定布尔变量控制勾选状态，比如用[(ngModel)]="isShowAll"，后续在组件内可直接通过变量判断状态，无需依赖事件对象，逻辑更灵活：

  <mat-checkbox [(ngModel)]="isShowAll" (change)="showAllUsers($event)">
    Show All
  </mat-checkbox>
  

  isShowAll = false; // 初始未勾选，显示当前用户
  
  showAllUsers(event: MatCheckboxChange){
    this.isShowAll = event.checked;
    this.isShowAll ? this.getUsers() : this.getUsersById();
  }
  

问题2：在ngAfterViewInit中调用showAllUsers函数时需要传递什么参数？ #

showAllUsers当前接收MatCheckboxChange类型参数，有两种调用方式：

方案1：构造模拟的MatCheckboxChange对象 #

传入包含checked属性的对象，用类型断言绕过类型检查：

import { MatCheckboxChange } from '@angular/material/checkbox';

ngAfterViewInit(){
  // 初始显示当前用户，传入checked: false
  this.showAllUsers({ checked: false } as MatCheckboxChange);
}

方案2：修改函数支持布尔参数（更优） #

重构函数使其兼容事件参数和布尔值，调用更简洁，也避免依赖事件对象：

// 重载函数，兼容两种参数类型
showAllUsers(checkedOrEvent: boolean | MatCheckboxChange){
  const isChecked = typeof checkedOrEvent === 'boolean' 
    ? checkedOrEvent 
    : checkedOrEvent.checked;
  
  isChecked ? this.getUsers() : this.getUsersById();
}

// ngAfterViewInit中直接传布尔值
ngAfterViewInit(){
  this.showAllUsers(false); // 初始显示当前用户
}

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