是否可以将自定义按钮添加到垫选择下拉列表？答案

【问题标题】：Is it possible to add custom buttons to mat select dropdown?是否可以将自定义按钮添加到垫选择下拉列表？
【发布时间】：2020-05-14 19:07:37
【问题描述】：

是否可以像下面的照片一样添加自定义按钮（确定和取消），以便在多选垫下拉菜单中，用户不必在框外单击以关闭下拉菜单？

我没有在 Angular 文档中看到这个

<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

这是我目前所拥有的堆栈闪电战 https://stackblitz.com/edit/select-all-option-angular-material?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

可以分享demo链接吗？
添加了堆栈闪电战
这样的？ https://stackblitz.com/edit/select-all-option-angular-material-6aexy8这种情况你需要处理事件
是的，这行得通。您可以将此作为答案发布，以便获得赏金吗？
添加了一个带有基本事件处理的版本。检查是否适合您

标签： html css angular

【解决方案1】：

这是一个带有基本事件处理的版本

https://stackblitz.com/edit/select-all-option-angular-material-uvu3eb

【讨论】：

无插件，首选。

【解决方案2】：

您可以通过执行以下操作来制作“固定”页脚：

<mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected">
        <div class="custom-panel">
            <mat-option>None</mat-option>
            <mat-option value="option1">Option 1</mat-option>
            <mat-option value="option2">Option 2</mat-option>
            <mat-option value="option3">Option 3</mat-option>
        </div>
        <footer>
            <button mat-raised-button>Ok</button>
            <button mat-button>Cancel</button>
        </footer>
    </mat-select>
</mat-form-field>

和css：

// This one must be in the global style (or ng-deep but it's deprecated :( )
.mat-select-panel{
  overflow: hidden !important;
}

footer{
  border-top:2px solid gray; 
  height: 44px;
  padding-top: 10px;
  text-align:right;
}

.custom-panel {
  max-height: 200px; // mat-select-panel height = 256px. 200 + 10 + 44 + 2
  overflow: auto;
}

这里是the repro on stackblitz

尝试添加更多选项以查看滚动不会影响您的按钮。

它还可以像你的 stackblitz 中的魅力一样发挥作用。我只是用一个带有类的 div 更改了“页脚”。

【讨论】：