角2材質ボタンで開く選択

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を使用することですアレント。

しかし、いずれにせよ、私は同じ問題を抱えていたし、この汚いハックは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; 
    } 

Inを私のプロジェクトでは、スタックブリッツでうまく見えますが、とにかくここではlinですkをこのコードの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(); 
} 

をしてから、あなたのテンプレート内の任意の要素にクリックイベントを配置することができます：

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

お楽しみください！