我使用带有输入字段和选择的Angular Material创建了一个简单的Angular应用程序。
在我的选择中，我使用来自account.component.ts的HTTP get请求访问数据，该请求位于我的资产文件夹中。
我已经为select选择了搜索过滤器，但是当我输入所需的选项时，列表不会被过滤。
import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import { AccountdetailService } from '../accountdetail.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
filtertext: string;
departments: any;
acc_id='': number;
constructor( private accdetailservice: AccountdetailService ) { }
/* Table Starts here
---------------------- */
displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);
applyFilter(filterValue: any) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource1.filter = filterValue;
}
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data => {
this.departments = data;
// Add this row
this.dataSource1.data = data;
});
}
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource1.paginator = this.paginator;
}
@ViewChild('form') form;
reset() {
this.form.nativeElement.reset()
}
}
const ELEMENT_DATA: Element[] = [];
：
account.component.html <mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>
<form #form>
<table>
<tr><td> Account ID</td>
<td>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Account ID" [(value)]="acc_id">
</mat-form-field><br/>
</td>
    
<td>Department</td>
<td>
<mat-form-field>
<mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department">
<input class="input1" matInput type="text" [(ngModel)]="filtertext" (keyup)="applyFilter($event.target.value)">
<mat-option *ngFor="let dep of departments | filter:filtertext " [value]="dep.department" >
{{ dep.department }}
</mat-option>
</mat-select>
</mat-form-field>
</td></tr>
</table>
</form>
<br/><br/>
<button mat-raised-button color="primary" (click)="reset()">Reset </button>
<!-- Table starts here -->
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource1">
<!-- Account No. Column -->
<ng-container matColumnDef="acc_id">
<mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="acc_des">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_des}} </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="CPC">
<mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.CPC}}</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="dept_id">
<mat-header-cell *matHeaderCellDef> DeptID </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.dept_id}}</mat-cell>
</ng-container>
<!-- Dept Description Column -->
<ng-container matColumnDef="deptdesc">
<mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.deptdesc}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns1;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</mat-card>
：
filter.pipe.ts import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(departments1: any, filtertext: string) {
if(filtertext=== undefined){
return departments1;
} else if(departments1)
{
return departments1.filter(function(department){
return department.value.toLowerCase().includes(filtertext.toLowerCase());
})
} }}
：
app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { AppMaterialModule } from './app-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account/account.component';
import { AccountdetailService } from './accountdetail.service';
import './rxjs-operators';
@NgModule({
declarations: [
AppComponent,
AccountComponent ,
FilterPipe
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AppMaterialModule,
FormsModule ,
HttpModule
],
providers: [ AccountdetailService ],
bootstrap: [AppComponent]
})
export class AppModule { }
：
Account ID最后，我为表单应用了一个重置按钮。单击Reset按钮后，Department输入会重置，但{{1}}选择字段不会重置。