如何在Angular选择列表中，在选中的复选框下方显示Select组件？

要实现“选中指定复选框后在其下方显示Select组件”的效果，需要同时解决布局换行和条件渲染两个问题，具体修改如下：

1. 调整布局让Select垂直排列 #

mat-list-option内部默认是水平flex布局，直接放置文本和Select会导致同行显示。我们可以用容器包裹内容，设置垂直flex布局强制元素换行。

2. 控制Select仅在复选框选中时显示 #

原代码的*ngIf仅判断了复选框标签，还需添加选中状态的判断，确保只有目标复选框被选中后才渲染Select组件。

修改后的完整代码 #

<mat-selection-list>
    <mat-list-option 
        *ngFor="let checkbox of checkboxes" 
        color="primary" 
        checkboxPosition="before"
        [value]="checkbox" 
        [selected]="isCheckboxChecked(checkbox)" 
        (click)="changeCheckboxState(checkbox)"
    >
        <!-- 垂直布局容器，让文本和Select上下排列 -->
        <div class="option-content">
            <span class="extense-text">{{ checkbox.label }}</span>

            <!-- 仅当Checkbox 3被选中时显示Select -->
            <div *ngIf="checkbox.label === 'Checkbox 3' && isCheckboxChecked(checkbox)">
                <mat-form-field style="width: 100%; margin-left: 28px;">
                    <mat-label>Choose an option</mat-label>
                    <mat-select [(value)]="selectedOption" (selectionChange)="selectOption($event.value)">
                        <mat-option *ngFor="let option of options" [value]="option">
                            {{option}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
    </mat-list-option>
</mat-selection-list>

配套CSS样式 #

.option-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 可选：增加文本与Select的间距，提升可读性 */
}

关键说明 #

• flex-direction: column：强制容器内元素垂直排列，彻底解决同行显示问题。
• *ngIf复合条件：同时判断复选框标签和选中状态，精准控制Select的显示时机。
• margin-left: 28px：可选样式，让Select与复选框文本对齐，视觉布局更协调（数值可根据实际需求调整）。

内容的提问来源于stack exchange，提问作者Héctor Iglesias