Question

我正在使用角度8，并在下拉字段中实现了过滤器。但我不知道该如何固定选择垫子顶部的搜索栏。

html

<h4>mat-select</h4>
<mat-form-field>
  <mat-label>State</mat-label>
  <mat-select>
     <input (keyup)="onKey($event.target.value)"> // **Send user input to TS**
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of selectedStates" [value]="state">{{state}}</mat-option>
  </mat-select>
</mat-form-field>

ts

states: string[] = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
    'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
    'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
    'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
    'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
    'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];


selectedStates = this.states; 


onKey(value) { 
this.selectedStates = this.search(value);
}


search(value: string) { 
  let filter = value.toLowerCase();
  return this.states.filter(option => option.toLowerCase().startsWith(filter));
}

Answer 1

您可以使用ngx-mat-select-search包来实现相同目的：

首次安装：

npm install ngx-mat-select-search

在app.module.ts中：

import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
and in imports array:

imports: [
   ....,
   NgxMatSelectSearchModule 
]

HTML代码：

<mat-select [formControl]="control" ngDefaultControl placeholder="Tags" #Select>
        <ngx-mat-select-search [placeholderLabel]="'Search Item'" [noEntriesFoundLabel]="'No matching records found'" [formControl]="control"
         ngDefaultControl></ngx-mat-select-search>
        <mat-option class="m-t" *ngFor="let obj of filteredRecords | async" [value]="obj">
            {{obj}}
        </mat-option>
    </mat-select>

CheckThisSample

固定在垫子中的滤棒选择角度9

1 个答案: