Angular 18+Material子Select初始加载未触发禁用状态问题求助

问题原因 #

初始加载时，虽然模板里父Select默认选中了"Show all"，但组件类对应的绑定变量未初始化，导致子Select的[disabled]判断表达式未返回预期的true。手动切换后再选回"Show all"时，变量同步完成，禁用效果才正常生效。

修复方法 #

1. 初始化父选择的绑定变量
   在组件类里直接将父选择的绑定变量设为"Show all"对应的值，比如你的选项用'all'代表"Show all"，就这么写：

   selectedParent = 'all'; // 主动初始化为"Show all"对应的选项值
   

   让组件初始化时就明确父选择的状态，不用依赖模板渲染后的同步。

2. 确保[disabled]表达式准确
   子Select的禁用判断直接基于初始化后的组件变量：

   <mat-select [disabled]="selectedParent === 'all'">
     <!-- 子选项内容 -->
   </mat-select>
   

   把组件变量作为状态的唯一来源，不要依赖模板默认选中属性来控制。

3. 检查选项值的匹配性
   确认父选项的value和判断标识完全一致，避免类型不匹配（比如用数字0代表"Show all"，但判断时用字符串'0'）。如果是对象类型的选项，就用对象的唯一属性（比如id）来做判断依据。

关键说明 #

Angular初始化阶段，模板的默认选中不会自动同步到组件变量，必须手动初始化变量，才能让[disabled]在第一次渲染时就计算出正确的禁用状态。手动切换选项时，valueChange事件会更新变量，所以此时判断逻辑能正常生效，核心就是要主动给变量赋初始值。

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