Angular中如何基于mat-option的值显示嵌套子mat-option？

问题场景 #

作为Angular新手，想要在mat-select的mat-option中添加嵌套子选项：

• 主选项列表dhList为['giraffe', 'horse', 'bear']
• 仅bear对应子列表subList：['polar bear', 'grizzly bear', 'brown bear']
• 需要根据当前主选项的类型，控制子选项的显示

原代码问题 #

当前代码存在两个核心问题：

1. mat-option不能直接嵌套mat-option，不符合Angular Material的组件规范，会导致渲染异常
2. 未添加判断逻辑，所有主选项都会显示子列表，不符合需求

修正方案 #

第一步：调整数据结构

先把主列表改成包含子项的结构化数据，让每个主选项和对应的子列表关联起来：

// 组件类中定义数据
dhList = [
  { name: 'giraffe', subList: [] },
  { name: 'horse', subList: [] },
  { name: 'bear', subList: ['polar bear', 'grizzly bear', 'brown bear'] }
];

第二步：修改模板代码

使用Angular Material官方推荐的mat-optgroup实现分组嵌套，同时通过*ngIf控制子选项的显示：

<ng-container matColumnDef="dh">
    <th id="dh" mat-header-cell *matHeaderCellDef mat-sort-header> DH</th>
    <td mat-cell *matCellDef="let row" [formGroup]="row">
        <div *ngIf="selection.isSelected(row); else display">
            <mat-form-field class="small">
                <mat-select formControlName="dh">
                    <!-- 遍历结构化的主列表 -->
                    <ng-container *ngFor="let item of dhList">
                        <!-- 无子女项直接显示普通选项 -->
                        <mat-option *ngIf="!item.subList.length" [value]="item.name">
                            {{item.name}}
                        </mat-option>
                        <!-- 有子女项用optgroup分组展示 -->
                        <mat-optgroup *ngIf="item.subList.length" [label]="item.name">
                            <mat-option *ngFor="let subItem of item.subList" [value]="subItem">
                                {{subItem}}
                            </mat-option>
                        </mat-optgroup>
                    </ng-container>
                </mat-select>
            </mat-form-field>
        </div>
        <ng-template #display>{{row.get('dc').value}}</ng-template>
    </td>
</ng-container>

关键说明 #

• mat-optgroup是官方专门用于实现分组选项的组件，比嵌套mat-option更稳定且符合规范
• 通过item.subList.length判断是否显示子选项，精准控制仅bear展示子列表
• 每个选项的[value]绑定对应的值，保证表单控件能正确获取选中值

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