我们如何更改 mat-select 下拉菜单的 UI？答案

【问题标题】：How can we change the UI for dropdowns for mat-select?我们如何更改 mat-select 下拉菜单的 UI？
【发布时间】：2021-01-07 17:32:58
【问题描述】：

我正在尝试实现一个下拉列表，该下拉列表将有一个包含 3 列（ID、模型、描述）的标题。我知道如何使用 mat-select 做一个简单的下拉菜单，

 <mat-select>
    <mat-option> a </mat-option>
    <mat-option> b </mat-option>
    <mat-option> c </mat-option>
  </mat-select>

但是，我不知道如何制作更复杂的下拉菜单，有人可以告诉我如何解决这个问题吗？谢谢！
Click the arrow, the dropdown will show

【问题讨论】：

您提供了一个指向手绘下拉菜单的链接，没有代码，几乎没有什么可做的，您要求提示。这里有一个提示：stackoverflow.com/help/how-to-ask.
嗨，Richard，我不是说不提供代码，但我什至不知道如何开始实现自定义下拉菜单。这就是为什么我要询问如何处理它的方向。

标签： angular angular-material

【解决方案1】：

这不是一个“简单的”，前段时间我做了一些你想要的，但使用 ng-bootstrap 作为基础（它是 this github ）。使用材质角度制作需要用到

一个 Mat-Input（只读）
一个 Mat-Menu（模拟“下拉菜单”）——我真的不知道为什么材料角度没有下拉菜单-
垫桌

所以你需要一些类似的东西

<input matInput (focus)="..." (blur)="..." (keydown)="...">
<mat-menu #menu="matMenu">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    ...
    </table>
</mat-menu>

祝你好运，编码愉快！

注意：如果我们需要 matmenu 不关闭，您可以使用 this SO

<mat-menu #appMenu="matMenu">
    <div (click)="$event.stopPropagation()">
        ..here what you want..
    </div>
</mat-menu>

【讨论】：