如何让Angular Material输入框与选择框在单个表单域内单行显示？

我来帮你搞定这个问题！你现在的代码里有两个关键问题导致它们换行显示：

1. 外层容器用了 fxLayout="column"，这是垂直布局，会强制内部元素从上到下排列；
2. mat-form-field 组件默认是为单个表单控件设计的，把输入框和选择框塞到同一个 mat-form-field 里会打乱Material的默认布局逻辑。

推荐解决方案（规范且易维护） #

我们可以调整布局指令，同时给每个表单控件单独分配 mat-form-field，再通过Flex布局让它们横向排列：

<div fxLayout="row" fxLayoutGap="10px" class="mat-elevation-z8 p-2">
  <!-- 搜索输入框 -->
  <mat-form-field class="flex-grow-1">
    <input matInput placeholder="Search table..." (keyup)="updateFilter($event)">
  </mat-form-field>
  
  <!-- 下拉选择框 -->
  <mat-form-field class="flex-grow-1">
    <mat-select name="ampm" [(ngModel)]="selectedtablesearch" (selectionChange)="updateFilter($event)">
      <mat-option *ngFor="let draft_tblselect of draft_tblselects" [value]="draft_tblselect.viewValue">
        {{draft_tblselect.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

代码说明 #

• fxLayout="row"：把外层容器改成水平布局，让内部元素从左到右排列；
• fxLayoutGap="10px"：给两个表单域之间添加间距，避免视觉上挤在一起；
• class="flex-grow-1"：让每个 mat-form-field 自动平分容器的可用宽度（你也可以换成固定宽度，比如 style="width: 250px"）；
• p-2：给容器添加上下左右内边距，让内容不会贴紧边缘。

备选方案（强行在单个mat-form-field内同行） #

如果你一定要把两个控件放在同一个 mat-form-field 里，可以通过自定义CSS实现，但这种方式可能会破坏Material的默认样式（比如浮动标签的位置），仅供参考：

<div fxLayout="row" class="mat-elevation-z8 p-2">
  <mat-form-field class="full-width">
    <div style="display: flex; gap: 10px; align-items: center;">
      <input matInput placeholder="Search table..." (keyup)="updateFilter($event)" style="flex: 1;">
      <mat-select name="ampm" [(ngModel)]="selectedtablesearch" (selectionChange)="updateFilter($event)" style="width: 150px;">
        <mat-option *ngFor="let draft_tblselect of draft_tblselects" [value]="draft_tblselect.viewValue">
          {{draft_tblselect.viewValue}}
        </mat-option>
      </mat-select>
    </div>
  </mat-form-field>
</div>

<style>
.full-width {
  width: 100%;
}
</style>

注意事项 #

确保你的Angular项目已经正确导入了 FlexLayoutModule，否则 fxLayout 这类指令不会生效。

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