javascript - 在 Angular Material 中的 mat-multiple select 中添加搜索功能

标签 javascript html angular angular-material

我想在我的垫子多选下拉列表中添加搜索功能。 我已经在 J​​query 中完成了这件事,但我想在 Angular Material 中做同样的事情。 这是设计图片。 Here is the image

最佳答案

试试 stackblitz 中的这个例子

stackblitz example with angular 8

在你的html文件中

 <h2>Multiple selection</h2>
  <p>
    <mat-form-field>
      <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true">
        <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </p>
  <p>
    Selected Banks: 
  </p>
  <ul *ngFor="let bank of bankMultiCtrl?.value">
    <li>{{bank.name}}</li>
  </ul>

关于javascript - 在 Angular Material 中的 mat-multiple select 中添加搜索功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58747639/

相关文章:

javascript - &lt;input type="date> onchange 触发太多

jquery - 如何使用jquery添加父标签

Angular Material 在 StackBlitz 中似乎不起作用

TypeScript:如何不使用相对路径导入类?

javascript - 在 Jest 中模拟 WebSocket

javascript - Ember 的特性有哪些?或者它们是方法?

html - @font-face 自定义字体的问题

angular - 从管道更改语言时如何更改日期格式

javascript - Jstree:无法读取未定义的属性子项。时间问题?

javascript - Google Maps API - 兴趣点