Angular 11 mat-table两级嵌套可展开行实现undefined报错如何解决？

你的问题核心是直接复用第一级逻辑时，没有适配二级嵌套的上下文和状态管理，触发undefined报错的具体原因和修复方案如下：

• 状态变量共用冲突
  第一级展开使用的expandedElement全局变量是用来存储一级行（用户对象）的，你第二级展开直接复用了同一个变量，点击二级地址行时会把地址对象覆盖掉原有存储的用户对象。后续一级行逻辑读取用户专属属性（比如addresses、orders等）时，实际读取的是地址对象上不存在的属性，就会抛出undefined错误。
  修复方式：单独声明二级展开状态变量，例如expandedAddress: Address | null，专门用来存储当前展开的二级地址行对象。
• 模板上下文变量名冲突
  你在二级table循环地址列表时，循环项依然使用了element作为变量名，和外层一级table的行变量element重名冲突，导致点击事件传参、展开判断时引用的对象完全错误。
  修复方式：二级循环的项重命名，例如写为let address of element.addresses，所有二级行相关的绑定都使用address变量。
• 二级展开判断逻辑未适配
  直接复制的第一级展开判断*ngIf="expandedElement === element"没有对应修改，要么完全匹配不到无法触发展开，要么匹配错误触发逻辑异常。
  修复方式：二级展开行的判断修改为*ngIf="expandedAddress === address"，行点击事件修改为(click)="expandedAddress = expandedAddress === address ? null : address"。

如果你需要支持同时展开多个二级行，可以不用维护全局的二级状态变量，直接给地址对象新增isExpanded布尔属性，点击时切换address.isExpanded = !address.isExpanded，展开判断直接用*ngIf="address.isExpanded"即可，降低状态维护成本。

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