为角材料的 <mat-select> 组件实现搜索过滤器
Posted
技术标签:
【中文标题】为角材料的 <mat-select> 组件实现搜索过滤器【英文标题】：Implement a search filter for the <mat-select> component of angular material 【发布时间】：2018-07-04 16:44:17 【问题描述】：尝试使用 angular material 在 angular 2 中实现一个简单的应用程序。我实现了一个带分页的简单表格。
我也使用了mat-select 组件，但为此我想实现一个搜索过滤器来键入并从列表中搜索所需的选项。
下面显示的是我的 .html 文件
<table>
<tr><td> Department</td>
<td>
<mat-form-field>
<mat-select placeholder=" ">
<mat-option> </mat-option>
<mat-option *ngFor="let dep of dept" [value]="dep">dep</mat-option>
</mat-select>
</mat-form-field><br/>
</td>
</tr>
</table>
<br><br>
<button >Search</button>
<button >Reset</button>
<button >Close</button>
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Account No. Column -->
<ng-container matColumnDef="accno">
<mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell>
<mat-cell *matCellDef="let element"> element.accno </mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="accdesc">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element"> element.accdesc </mat-cell>
</ng-container>
<!-- Investigator Column -->
<ng-container matColumnDef="investigator">
<mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
<mat-cell *matCellDef="let element"> element.investigator </mat-cell>
</ng-container>
<!-- Account CPC Column -->
<ng-container matColumnDef="accCPC">
<mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
<mat-cell *matCellDef="let element"> element.accCPC </mat-cell>
</ng-container>
<!-- Location Column -->
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let element"> element.location </mat-cell>
</ng-container>
<!-- Client Dept ID Column -->
<ng-container matColumnDef="cdeptid">
<mat-header-cell *matHeaderCellDef> ClientDeptID </mat-header-cell>
<mat-cell *matCellDef="let element"> element.cdeptid </mat-cell>
</ng-container>
<!-- Dept Description Column -->
<ng-container matColumnDef="depdesc">
<mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
<mat-cell *matCellDef="let element"> element.depdesc </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</mat-card>
下图是我的 .ts 文件
import Component, ViewChild from '@angular/core';
import MatPaginator, MatTableDataSource from '@angular/material';
@Component(
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
)
export class AccountComponent
dept = [
'Administrative Computer',
'Agosta Laboratory',
'Allis Laboratory',
'Bargaman Laboratory',
'Bio-Imaging Resource Center',
'Capital Projects',
'Casanova Laboratory',
'Darst Laboratory',
'Darnell James Laboratory',
'Deans Office',
'Energy Consultant',
'Electronic Shop',
'Facilities Management',
'Field Laboratory'
];
displayedColumns = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit()
this.dataSource.paginator = this.paginator;
export interface Element
accno: number;
accdesc: string;
investigator: string;
accCPC: string;
location:string;
cdeptid: number;
depdesc: string;
const ELEMENT_DATA: Element[] = [
accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'
];
谁能帮我在我的应用程序中使用 mat-select 组件实现搜索过滤器？
【问题讨论】：
【参考方案1】：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'
];
**// Initially fill the selectedStates so it can be used in the for loop**
selectedStates = this.states;
**// Receive user input and send to search method**
onKey(value)
this.selectedStates = this.search(value);
**// Filter the states list and send back to populate the selectedStates**
search(value: string)
let filter = value.toLowerCase();
return this.states.filter(option => option.toLowerCase().startsWith(filter));
解决方案相当简单。 应该像魅力一样工作:)
【讨论】：
这不会过滤下拉列表，它只会告诉真假。 问题是您从 stackblitz 复制和粘贴，但您不知道这里发生了什么。 不确定你在说什么，我在我的应用程序中使用了上面的代码。我用相同的代码创建了 stackblitz 来证明它有效。 为我工作并节省了我的时间！附带说明一下，如果您希望在字符串中的任何位置搜索文本，请使用option.toLowerCase().includes(filter)。 @GoranSu，Stackblitz 链接失效了
很高兴听到这段代码仍然有帮助；）链接到新编辑器：stackblitz.com/edit/angular-dukfxf【参考方案2】：
目前您可以在mat-select 之上使用第 3 方组件：
https://www.npmjs.com/package/ngx-mat-select-search
演示 (https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example)
顺便说一句。这可能会在一些即将发布的 Angular Material 版本中得到支持。讨论已经开始：https://github.com/angular/components/issues/5697
【讨论】：
【参考方案3】：我找到了搜索下拉值的解决方案
这里是html代码
<mat-select class="yourClass" [(ngModel)]="searchObj">
<input class="yourClass" placeholder ="search " (keyup)="onKey($event.target.value)">
<mat-option *ngIf="someCondition" [value]='Select'>Select</mat-option>
<mat-option *ngFor="let data of dataArray" [value]="data">data</mat-option>
</mat-select>
这是打字稿代码 获取输入值的键函数
onKey(value)
this.dataArray= [];
this.selectSearch(value);
在下拉列表中提供的值内执行搜索给定值
selectSearch(value:string)
let filter = value.toLowerCase();
for ( let i = 0 ; i < this.meta.data.length; i ++ )
let option = this.meta.data[i];
if ( option.name.toLowerCase().indexOf(filter) >= 0)
this.dataArray.push( option );
这个函数是你的主要搜索函数调用 api 并获取数据的地方
this.meta.data
searchDpDropdown()
for ( let i = 0 ; i < this.meta.data.length; i ++ )
this.dataArray.push( this.meta.data[i] );
【讨论】：
我觉得这很简单：this.dataArray = this.meta.data.filter( i => i.name.toLowerCase().indexOf(filter) >= 0 );
非常有趣的解决方案！我没有找到任何其他文档谈论将输入标签放入选择中，但这很顺利【参考方案4】：
我发现 angular 的 primefaces 确实有一个多选列表，可让您搜索列表项。它还包括一个内置的全选按钮！你可以在这里找到它https://www.primefaces.org/primeng/#/multiselect
您可以使用 npm install primeng --save 安装 primefaces
【讨论】：
【参考方案5】：您可以使用 Angular 材质自动完成功能：Angular Material Autocomplete Component
【讨论】：
【参考方案6】：我已经为此做了一些工作，即使它的实现不正确
component.hml
`
<mat-select formControlName="buyersCountryCode" matInput placeholder="Buyer's Country" required>
<input #buyersCountryQuery matInput placeholder="Search" class="search-input" (keyup)="filterDropDowns(buyersCountryQuery.value, 'BUYERSCOUNTRY')">
<mat-option *ngFor="let country of filteredBuyersCountry" [value]="country.buyersCountryCode">country.buyersCountryValue</mat-option>
</mat-select>
`
component.ts
`
this.filteredBuyersCountry = query
? this.filteredBuyersCountry.filter(item =>
item.buyersCountryValue
.toLocaleLowerCase()
.includes(query.toLowerCase())
)
: this.dropDowns.buyersCountry;
`
【讨论】：
【参考方案7】：> <mat-form-field>
<mat-label>Items</mat-label>
<mat-select name="item" [(ngModel)]="selected">
<form>
<mat-form-field class="w-100">
<input name="query" type="text" [(ngModel)]="query" matInput>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</form>
<mat-option>
</mat-option>
<mat-option *ngFor="let option of options|appFilter:query" [value]="option">
option.label
</mat-option>
</mat-select>
【讨论】：
请描述问题所在以及您的解决方案究竟是什么【参考方案8】：与其自定义 MatSelect 以便将键入搜索功能添加到选项列表中，不如使用 MatAutocomplete
自动完成是一个普通的文本输入，由一个面板增强 建议的选项。
HTML：
<form class="example-form">
<input type="text" placeholder="Search for a street" [formControl]="control"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let street of filteredStreets | async" [value]="street">
street
</mat-option>
</mat-autocomplete>
</form>
TS
control = new FormControl();
streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
filteredStreets: Observable<string[]>;
ngOnInit()
this.filteredStreets = this.control.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
private _filter(value: string): string[]
const filterValue = this._normalizeValue(value);
return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
private _normalizeValue(value: string): string
return value.toLowerCase().replace(/\s/g, '');
参考资料： Demo (StackBlitz) || Official Docs & Examples
【讨论】：
以上是关于为角材料的 <mat-select> 组件实现搜索过滤器的主要内容，如果未能解决你的问题，请参考以下文章