无法过滤使用 Http get in angular 2 访问的 (MatSelect) 中的数据

问题描述

我使用带有输入字段和选择的 Angular Material 创建了一个简单的 Angular 应用.

在我的选择中，我使用来自 accountdetails.json 的 HTTP get 请求访问数据，该请求位于我的资产文件夹中.

我已经为选择应用了搜索过滤器，但是当我输入所需的选项时，列表没有被过滤.

account.component.ts:

import {Component, ViewChild, Inject, OnInit} from '@angular/core';从'@angular/forms'导入{FormControl}；从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';从'@angular/forms'导入{ReactiveFormsModule}；从@angular/forms"导入{FormGroup}；从@angular/material"导入 {MatPaginator, MatTableDataSource}；从 '../accountdetail.service' 导入 { AccountdetailService };@成分({选择器:'应用程序帐户'，templateUrl: './account.component.html',styleUrls: ['./account.component.scss']})导出类 AccountComponent 实现 OnInit {过滤文本:字符串；部门:任何；acc_id='':号码；构造函数(私人accdetailservice:AccountdetailService){}/* 表格从这里开始--------------- */displayColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];dataSource1= new MatTableDataSource(ELEMENT_DATA);应用过滤器(过滤器值:任何){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource1.filter = filterValue;}ngOnInit(){this.accdetailservice.accountdetails().订阅(数据=> {this.departments = 数据；//添加这一行this.dataSource1.data = 数据；});}@ViewChild(MatPaginator) 分页器:MatPaginator；ngAfterViewInit() {this.dataSource1.paginator = this.paginator;}@ViewChild('form') 表单；重启() {this.form.nativeElement.reset()}}const ELEMENT_DATA: 元素[] = [];

account.component.html:

欢迎</mat-toolbar><br/><表格#form><表格><tr><td>帐户 ID<td><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="账户ID" [(value)]="acc_id"></mat-form-field><br/></td>&emsp;&emsp;&emsp;&emsp;<td>部门</td><td><mat-form-field><mat-select style="min-width: 200px;"placeholder="要搜索的类型" [(value)]="部门"><input class="input1" matInput type="text" [(ngModel)]="filtertext" (keyup)="applyFilter($event.target.value)"><mat-option *ngFor="让部门的部门| filter:filtertext " [value]="dep.department" >{{ 部门}}</mat-option></mat-select></mat-form-field></td></tr></表单><br/><br/><button mat-raised-button color="primary" (click)="reset()">重置</button><!-- 表格从这里开始--><垫卡><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource1"><!-- 账号栏--><ng-container matColumnDef="acc_id"><mat-h​​eader-cell *matHeaderCellDef>帐户ID.</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell></ng-容器><!-- 账户描述栏--><ng-container matColumnDef="acc_des"><mat-h​​eader-cell *matHeaderCellDef>账户描述 </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.acc_des}} </mat-cell></ng-容器><!-- 调查员栏--><ng-container matColumnDef="调查员"><mat-h​​eader-cell *matHeaderCellDef>调查员</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell></ng-容器><!-- 帐户每次点击费用列 --><ng-container matColumnDef="CPC"><mat-h​​eader-cell *matHeaderCellDef>帐户每次点击费用 </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.CPC}}</mat-cell></ng-容器><!-- 位置列--><ng-container matColumnDef="location"><mat-h​​eader-cell *matHeaderCellDef>位置</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.location}}</mat-cell></ng-容器><!-- 客户部门 ID 列 --><ng-container matColumnDef="dept_id"><mat-h​​eader-cell *matHeaderCellDef>DeptID </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.dept_id}}</mat-cell></ng-容器><!-- 部门描述栏--><ng-container matColumnDef="deptdesc"><mat-h​​eader-cell *matHeaderCellDef>部门描述</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.deptdesc}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns1" ></mat-h​​eader-row><mat-row *matRowDef="让行；列:displayColumns1;"></mat-row></mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"></mat-paginator>