Question

我有一个选择下拉列表，我想用按钮点击打开，在文档中没有任何提及 - 我尝试使用元素引用并在元素上使用select.open（）但它没有＆＃ 39;工作。还有其他人遇到过这个问题吗？

<button ngClass="menu-filter-item-button" type="button" mat-button (click)="select.open()">
    <strong class="menu-filter-item-title">{{filter.name}}</strong>
    <mat-icon>keyboard_arrow_down</mat-icon>
</button>
<mat-select #select multiple (change)="onSubmit($event)" [compareWith]="compareById" [(ngModel)]="filter.value">
    <mat-option *ngFor="let value of filter.default" [value]="value">
        {{value}}
    </mat-option>
</mat-select>

Answer 1

Material2还没有完全开发，所以很多东西还没有用，另一种方法是使用mdl或mdc-web。

但是无论如何我有同样的问题，这个肮脏的黑客解决了它而没有显示mat-select本身：

html：

    <button
      mat-icon-button
      matTooltip="Language"
      (click)=select.open()>

      <mat-icon>language</mat-icon>

      <mat-select
        #select
        [(ngModel)]="setLang"
        class="langSelect">
        <mat-option (click)="changeLang()" value="en">English</mat-option>
        <mat-option (click)="changeLang()" value="de">Deutsch</mat-option>
      </mat-select>

    </button>

css：

    ::ng-deep .langSelect div.mat-select-arrow-wrapper {
      display: none;
    }

    ::ng-deep .langSelect.mat-select {
      display: inline;
    }

在我的项目中，它在stackblitz上看起来更好，但无论如何这里是stackblitz上此代码的链接。

如果你想要一个额外的按钮打开mat-select，这对你有用（不需要css）：

<button mat-icon-button matTooltip="Language" (click)=select.open()>
    <mat-icon>language</mat-icon>
    <mat-select #select [(ngModel)]="setLang">
      <mat-option (click)="changeLang()" value="en">English</mat-option>
      <mat-option (click)="changeLang()" value="de">Deutsch</mat-option>
    </mat-select>
</button>

Answer 2

似乎你无法尝试从父母那里操纵#element，为了使它工作我必须在组件中走很长的路：

@ViewChild(MatSelect) mySelector: MatSelect;

openSelector() {
    this.mySelector.open();
}

然后您可以将click事件放在模板中的任何元素上：

<div (click)="openSelector()">

享受！

Answer 3

在我的示例中，我需要在使用按钮打开的工具栏中进行多重选择。您可以这样使用：

HTML：

<button mat-button (click)="mySelect.open()"
        matTooltip="Borders">
  <i class="material-icons">rounded_corner</i>
</button>

<mat-select style="visibility:hidden;width: 0"
            #mySelect
            [formControl]="bordersControl"
            multiple>
  <mat-option value="LEFT_BORDER">LEFT_BORDER</mat-option>
  <mat-option value="TOP_BORDER">TOP_BORDER</mat-option>
  <mat-option value="BOTTOM_BORDER">BOTTOM_BORDER</mat-option>
  <mat-option value="RIGHT_BORDER">RIGHT_BORDER</mat-option>
</mat-select>

TS：

bordersControl = new FormControl();

Answer 4

我有同样的问题。基本上是有角材质的mat-select添加和覆盖，即cdk-over-pane，其z-index为1000。在您的按钮上添加z-index，以便该按钮可以识别点击事件并关闭下拉菜单。

此外，如果需要打开/关闭多个下拉菜单，则选择mat-select也是一个不好的选择。我花了整整一周的时间来了解它如何工作以最终编写自己的组件。

如果打开操作不起作用，请验证您是否已经有任何叠加层或按钮能够抓住事件。

Answer 5

使用 mat 菜单代替 mat-select

<button mat-mini-fab color="primary"[matMenuTriggerFor]="matmenu">
    <small>{{model.code}}</small>
</button>
<mat-menu #matmenu="matMenu">
    <button mat-menu-item *ngFor="let item of options" (click)="this.model= item;">
        <span>{{item.name}}</span>
    </button>
</mat-menu>

角度2材质选择打开按钮

5 个答案: