详细

Question

详细

我正在尝试在角度2中实现搜索，但我不知道如何做到这一点。我已经去了不同的教程，但它们都不适合我的情况。我有一个表，用户现在显示我想在姓名/电子邮件上搜索用户。给我一些好的想法，我可以做到这一点，还有一些实施的解决方案，所以我会查看它。

图像

Answer 1

这里我写了一个搜索管道的代码

import {Pipe} from '@angular/core';


@Pipe({
    name: "search"
})

export class SearchPipe {

    transform(value, term) {
        console.log(term + ' ' + value);
        if (term == null) {
            return null;
        }
        return value.filter((item) => item.Email.includes(term));
    }
}

Answer 2

创建一个简单的管道，例如下面的例子

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'FilterPipe',
})

export class FilterPipe implements PipeTransform {

transform(value: any, input: string) {
  if (input) {
   input = input.toLowerCase();
   return value.filter(function (el: any) {
    return el.name.toLowerCase().indexOf(input) > -1 || 
     el.email.toLowerCase().indexOf(input) > -1;
   })
  }
  return value;
 }
}

您可以根据需要更新管道。

More info

Answer 3

let res = [];
res = Object.assign([], this.data).filter(
  item => item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1,
)

其中this.data是您的数据数组。

Answer 4

有时你可能有一个包含许多列的表，你需要搜索表中的所有数据，而不管列是什么，所以不要使用多个管道，而是可以使用下面的解决方案

以下是从服务器获取数据的get方法，我们将数据的副本存储在 this.itemsData 中，以帮助用户清除搜索框时恢复原始表数据然而，使用 this.items

将其放入表格中

    getItems() {
this.getItemSub = this.crudService.getBill(this.storedLocalData.sessionId)
  .subscribe(data => {
    this.items = data;
    this.itemsData= this.items;

  })}

过滤方法

filterBillsItems(event) {
const val = event.target.value.toLowerCase();
//search in all columns 
var columns = Object.keys(this.itemsData[0]);

if(!columns.length)
  return;

  const rows = this.itemsData.filter(function(d) {
    for(let i = 0; i <= columns.length; i++) {
      var column = columns[i];
      // console.log(d[column]);
      if(d[column] && d[column].toString().toLowerCase().indexOf(val) > -1) 
    {
        return true;
      }
    }
  });  

  this.items= rows;  }

你的html中有

<input
 placeholder="Type to filter all columns" 
 value=""
 (keyup)='filterBillsItems($event)'>

示例表在这种情况下使用了惊人的ngx-datatable来绘制表格，也会以任何方式用于创建表格

<ngx-datatable
                class="material ml-0 mr-0 expandable striped"

                [rows]="items"
                [columnMode]="'flex'"
                [headerHeight]="50"
                [footerHeight]="50"
                [limit]="30"
                [rowHeight]="'auto'"> 

                <ngx-datatable-column prop='clientName' name="Name" [flexGrow]="1" >
                  <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row?.clientName }}
                  </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column prop='clientLocation' name="Location" [flexGrow]="1" >
                  <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row?.clientLocation }}
                  </ng-template>
                </ngx-datatable-column>

              </ngx-datatable>

Angular中的自定义搜索2

详细

图像

4 个答案: