Angular 2 Material选择使用按钮打开

Question

我有一个想要通过单击按钮打开的选择下拉列表，在文档中的任何地方都没有提及此内容-我尝试在元素上使用元素引用并使用select.open（），但它不起作用。还有其他人遇到这个问题吗？

<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。

但是无论如何，我有同样的问题，这个肮脏的hack解决了它，却没有显示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>