Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了角度2材质选择打开按钮大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个选择下拉列表,我想用按钮点击打开,在文档中没有提到这个 – 我尝试使用元素引用并在元素上使用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还没有完全开发,所以很多东西还没有用,另一种方法是使用 mdlmdc-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>

大佬总结

以上是大佬教程为你收集整理的角度2材质选择打开按钮全部内容,希望文章能够帮你解决角度2材质选择打开按钮所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: