我试图使用角度材料在角度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组件实现搜索过滤器？
最佳答案 我用这个
https://github.com/bithost-gmbh/ngx-mat-select-search
不幸的是,这是针对Angular 5(但也许有人需要它)web应用程序和兼容性是：
> @ angular / core：^ 5.0.0 || ^ 6.0.0
> @ angular / cdk：^ 5.0.0 || ^ 6.0.0
> @ angular / material：^ 5.0.0 || ^ 6.0.0
> rxjs：^ 5.5.2 || ^ 6.0.0
