角材料-输入框中的下拉列表

Question

使用Angular Materials，我们正在尝试实现与Bootstrap button with dropdowns组件相关的东西-即https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns

更具体地说，它是一个搜索Input Field与一个搜索选项dropdown的组合。在线框中看起来像这样：

即当您点击白色的向下箭头

这就是他们仅使用“材料选择”产生的；但是，问题实际上是：输入字段与下拉列表结合使用可以完成吗？

.search-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
  }
  
.search-full-width {
width: 100%;
}

:host ::ng-deep .mat-tab-body-content{
  min-height:500px;
  padding:5px;
}
.pad-left {
  margin-left: 5px; 
}
.mat-select-panel {
  background-color: blue;
}

<mat-form-field appearance="outline" class="search-full-width">
    <mat-select panelClass="mat-select-panel" [(value)]="selected"  disableOptionCentering=true> 
          <mat-option value="Basic">Basic</mat-option>
          <mat-option value="Advanced">Advanced</mat-option>
    </mat-select>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

这是一些入门（包含选择）-

https://stackblitz.com/edit/angular-mat-select-drpdwn

Answer 1

使用boostrap 4和mat-select的组合，我得到了想要的东西。只是需要正确设置样式。

<div class="input-group" style="margin: 15px 0 0 10px !important; ">
    <input type="text" id="basic_filter" #basicFilter placeholder="Search" class="form-control" value="{{searchOptions?.filter}}">
    <div class="input-group-append">
        <mat-select [(value)]="selected" class="pat-search" disableOptionCentering=true> 
            <mat-option value="Basic">Basic</mat-option>
            <mat-option value="Advanced">Advanced</mat-option>
        </mat-select>        
    </div>
    <mat-icon class="search-icon" matSuffix>arrow</mat-icon>
</div>