角材料输入并在单行的一个表单字段内选择

Question

我想要一个材料输入字段和一个材料选择一行（在一个表单字段内）。为了做到这一点，我编写了以下代码，但它分为两行。如何在一行中获得此输入和下拉菜单？

预期结果： Frontend view

我的html代码：

<div fxLayout="column" class="mat-elevation-z8">
    <mat-form-field class="p-1">
        <input matInput placeholder="Search table..."
            (keyup)="updateFilter($event)">
            <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>

Answer 1

我已经解决了这个问题。

代码：

<div fxLayout="row" class="mat-elevation-z8"> 
    <div fxFlex="80" class="p-2">
        <mat-form-field class="w-100"> 
            <input matInput placeholder="Search table..." (keyup)="updateFilter($event)">  
        </mat-form-field>
    </div>
    <div fxFlex="20" class="p-2"> 
        <mat-form-field class="w-100"> 
            <mat-select [(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>  
</div>