각도 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에 완전히 아직 개발되지 않은 많은 일들이 아직 작업이 arent, 대안 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에서 더 좋아 보이지만, 어쨌든 여기 lin k를 stackblitz에이 부호에. ,

<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를 조작하려고 할 수없는 것 같습니다 :

당신은 단순히이 당신을 위해 (필요하지 CSS)를 작동하지 않습니다 너무 mat-select을 열고 추가 버튼을 가지고하려면 그것이 내가 구성 요소를 통해 먼 길을 가야했다 작동하도록 :

@ViewChild(MatSelect) mySelector: MatSelect; 

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

을 그리고 당신은 템플릿의 모든 요소에 클릭 이벤트를 배치 할 수 있습니다 :

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

즐기십시오!