角度2材质选择打开按钮

发布时间：2020-12-17 17:23:53 所属栏目：安全来源：网络整理

导读：我有一个选择下拉列表,我想用按钮点击打开,在文档中没有提到这个 – 我尝试使用元素引用并在元素上使用select.open()但它不起作用.还有其他人遇到过这个问题吗？ button ngClass="menu-filter-item-button" type="button" mat-button (click)="select.open()

我有一个选择下拉列表,我想用按钮点击打开,在文档中没有提到这个 – 我尝试使用元素引用并在元素上使用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>

解决方法

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!