为角度材料的组件实现搜索过滤器
发布时间:2020-12-17 17:11:02 所属栏目:安全 来源:网络整理
导读:我试图使用角度材料在角度2中实现一个简单的应用程序.我实现了一个带分页的简单表格. 我也使用了mat-select组件,但为此我想实现一个搜索过滤器来键入并从列表中搜索所需的选项. 下面显示的是我的.html文件 table trtd Department/tdtd mat-form-field mat-se
我试图使用角度材料在角度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 这里也是工作演示 – https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.ts (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |