根据输入的值在角度2中为表格实施过滤器 [英] Implementing filter for table in angular 2 based on entered values

问题描述

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

I am trying to implement search option for my table created using angular material.

我输入了带有 Account ID 和 Department 下拉菜单的代码.我实现了HTTP get服务，将json文件中的数据提取到我的 Department 下拉菜单.

I have taken a input with Account ID and Department dropdown .I have implemented HTTP get service to fetch data from json file into my Department dropdown.

我能够使用get请求从json文件中获取数据到我的表中.

I able to fetch data in to my table from the json file using the get request.

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

But as I enter the value in my input field and click on search ,it should list me the rows with entered account id.

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

I have implemented the search event on Search button ,but I am unable to filter based on Account id..

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文件

[
    {
        "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并单击搜索"时，出现以下错误，如下图所示:

As I enter the account id and click on search ,its giving me the following error as shown below in the image

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

can anybody please guide me how can implement search functionality with the entered input...?

推荐答案

在account.component.html中，将现有表单字段替换为以下内容.

In account.component.html replace existing form field with following.

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

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

Following will be the implementation in account.component.ts

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

这篇关于根据输入的值在角度2中为表格实施过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！