Angular 的实时搜索输入 – ngx-mat-select-search

Angular 的实时搜索输入 – ngx-mat-select-search
插件名称 ngx-mat-select-searchv
发布时间 2020年6月5日
插件作者 bithost-gmbh

此NgxMatSelectSearch库提供了一个角度组件,为搜索/过滤Angular Material  库的MatSelect  选项  提供了一个输入字段  。

安装:

# NPM
$ npm install ngx-mat-select-search --save

使用

ngx-mat-select-search在您的项目中安装:

npm install ngx-mat-select-search

NgxMatSelectSearchModule中导入app.module.ts

import { MatFormFieldModule, MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

@NgModule({
  imports: [
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatSelectModule,
    MatFormFieldModule,
    NgxMatSelectSearchModule
  ],
})
export class AppModule {}

通过将ngx-mat-select-search组件放置在mat-select元素内来在组件内使用组件<mat-option>

<mat-form-field>
  <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
    <mat-option>
      <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    </mat-option>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
  </mat-select>
</mat-form-field>