根据输入的值实现角度为2的表格过滤器

Question

我正在尝试为使用角度材质创建的表格实现搜索选项。

我已通过帐户ID 和部门下拉列表进行了输入。我已实施HTTP get服务以将数据从json文件提取到我的部门下拉。

我可以使用get请求从json文件中获取数据到我的表中。

但是当我在输入字段中输入值并单击搜索时，它应该列出输入帐户ID的行。

我在搜索按钮上实现了搜索事件，但我无法根据帐户ID进行过滤。

下面显示的是我的account.component.ts

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 ) { }


ngOnInit(){
  this.accdetailservice.accountdetails()
  .subscribe(data => {
     this.departments = data;
     // Add this row
     this.dataSource1.data = data;
  });
}



  /* Table Starts here
  ---------------------- */

 displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
 dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);


search(acc_id:number , department:string)
{
  this.dataSource1[1]=this.acc_id;
}

  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  }  }

const ELEMENT_DATA: Element[] = [];

这是我的account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<table>
  <tr><td> Account ID</td>
<td>
  <mat-form-field>
    <input matInput placeholder=" " [(value)]="acc_id">
  </mat-form-field><br/>
</td>
&emsp;&emsp;&emsp;&emsp;
<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" >
                        <mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
</td>

</table>
 <br/><br/>
 <button mat-raised-button color="primary" (click)="search($event.target.value[0],department)">Search </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>

这是我的accountdetails.json fle

[
    {
        "acc_id": 1,
        "acc_des": "aaa",
        "investigator": "A-I",
        "department": "A",
        "dept_id": "101",
        "deptdesc": "A",
        "CPC": "OR",
        "location": "loc1"
    },

    {
        "acc_id": 2,
        "acc_des": "aaa",
        "investigator": "B-I",
        "department": "B",
        "dept_id": "102",
        "deptdesc": "A",
        "CPC": "OR",
        "location": "loc2"
    },

    {
        "acc_id": 3,
        "acc_des": "aaa",
        "investigator": "C-I",
        "department": "C",
        "dept_id": "103",
        "deptdesc": "B",
        "CPC": "OR",
        "location": "loc3"
    },

    {
        "acc_id": 4,
        "acc_des": "aaa",
        "investigator": "D-I",
        "department": "D",
        "dept_id": "104",
        "deptdesc": "A",
        "CPC": "OR",
        "location": "loc4"
    },

    {
        "acc_id": 5,
        "acc_des": "aaa",
        "investigator": "E-I",
        "department": "E",
        "dept_id": "105",
        "deptdesc": "B",
        "CPC": "OR",
        "location": "loc5"
    }

]

当我输入帐户ID并点击搜索时，它会给我以下错误，如下图所示

任何人都可以指导我如何使用输入的输入实现搜索功能......？

Answer 1

在account.component.html中使用以下内容替换现有表单字段。

  <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>

以下将是account.component.ts中的实现

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource1.filter = filterValue;
  }

Answer 2

要过滤特定字段，请更改默认过滤器

this.dataSource1.filterPredicate = 
  (data: Element, filter: string) => data.acc_id.indexOf(filter) != -1;