能否在mat-select下拉框中同时显示两个值？

没问题，要实现在mat-select的下拉选项里同时展示名称和地址两个字段，你只需要把静态文本替换成动态数据绑定，再补全遍历逻辑就可以啦，我帮你调整了代码：

修改后的完整代码示例： #

<mat-label for="property">Select property</mat-label>
<mat-select class="form-control" formControlName="property" id="property" disableOptionCentering
    panelClass="matSelect-class">
    <option value="" selected> -Select option- </option>
    <!-- 遍历你的数据源数组，这里假设数组名为properties -->
    <mat-option [value]="item.id" *ngFor="let item of properties">
        <span class="dropdown-name">{{ item.name }}</span>
        <span class="dropdown-address">{{ item.address }}</span>
    </mat-option>
</mat-select>

几个关键细节： #

• 必须加上*ngFor="let item of properties"来遍历你的数据源（这里默认你的数据数组叫properties，每个元素包含id、name、address三个字段，你可以根据实际情况修改变量名）
• 把原来的静态文本Name和address改成插值绑定{{ item.name }}和{{ item.address }}，这样就能动态渲染每条数据的对应字段
• 可以给两个span加简单的CSS样式，让选项排版更清晰：

.dropdown-name {
    display: inline-block;
    width: 160px;
    font-weight: 500;
}
.dropdown-address {
    color: #666;
    font-size: 0.9em;
}

这样设置后，下拉选项里就会同时显示每个属性的名称和地址啦~

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