根据输入的值在角度 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.

我使用帐户 ID 和 部门 下拉菜单进行了输入.我已经实现了 HTTP 获取服务以从 json 文件中获取数据到我的部门 下拉菜单.

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.

但是当我在输入字段中输入值并单击搜索时，它应该会列出输入帐户 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>

</mat-card>

This is my accountdetails.json fle

这是我的 accountdetails.json 文件

<预><代码>[{acc_id":1，"acc_des": "aaa","调查员": "A-I","部门": "A","dept_id": "101","deptdesc": "A","CPC": "或",位置":loc1"},{acc_id":2，"acc_des": "aaa","调查员": "B-I","部门": "B","dept_id": "102","deptdesc": "A","CPC": "或",位置":loc2"},{acc_id":3，"acc_des": "aaa","调查员": "C-I","部门": "C","dept_id": "103","deptdesc": "B","CPC": "或",位置":loc3"},{acc_id":4，"acc_des": "aaa","调查员": "D-I","部门": "D","dept_id": "104","deptdesc": "A","CPC": "或",位置":loc4"},{acc_id":5，"acc_des": "aaa","调查员": "E-I","部门": "E","dept_id": "105","deptdesc": "B","CPC": "或",位置":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屋！