0

我在角度 2 中创建列表，并希望在输入文本中输入值时过滤数据，但我的代码不起作用。我使用管道过滤它。请告诉我做错了什么。

html

<input type="text" class="form-control" #listFilter/>
<ul *ngFor="let data of dataList|filter:{name:listFilter}">

过滤管

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

@Pipe({
  name: "filter",
  pure: false
})
export class ArrayFilterPipe implements PipeTransform {
  transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
    return items.filter(item => {
      for (let field in conditions) {
        if (item[field] !== conditions[field]) {
          return false;
        }
      }
      return true;
    });
  }
}

按输入文本过滤的数组列表

[
    {
      id:1 ,
      name: "ABC",
    },{
      id:2 ,
      name: "XYZ",
    },{
      id:3 ,
      name: "AQW",
    },{
      id:4 ,
      name: "ASD",
    },{
      id:5 ,
      name: "BVC",
    }
  ];

我目前正在使用 Angular 2.0.0

4

2 回答 2

1

好的 首先，永远不要使用 Pipes 来过滤或排序您拥有的任何数组或其他对象。如果您来自巴西，请观看此课程：

https://www.youtube.com/watch?v=h1t_O_w0LOc&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=49

这个女孩解释了为什么你永远不应该用管道过滤或订购任何东西。

好的，现在让我们使用自动完成创建正确的输入，同时过滤用户输入值。

在此示例中，用户将搜索我们的书籍数组中的一本书。

这是组件：

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-filter-examples',
    templateUrl: './filter-examples.component.html',
    styleUrls: ['./filter-examples.component.css']
})

export class FilterExamplesComponent implements OnInit {

    books: string[] = ['Angular JS', 'Angular 2', 'JavaScript', 'HTML 5 and CSS 3',
    'Java 1', 'Java 2', 'Java 3', 'php', 'Typescript', 'C', 'c++',
    'C#'];
    filtro: string = '';

    getBooks() {

        // if the input is empty search result will show 0 books. 
        //This is just to not show all books before user do any search
        if (this.filtro === '') {
            return null;
        }



        if (this.books.length === 0 || this.filtro === undefined) {
            return this.books;
        }

        // Here where we will do the search. First of all filtro(filter in portuguese)
        // will be compare to all elements in our books (all of then in lower case) 
        // and will return all the elements that match with the variable filtro
        return this.books.filter((v) => {
            if (v.toLowerCase().indexOf(this.filtro.toLowerCase()) >= 0) {
                return true;
            }
            return false;
        });
    }
}

现在这是我们的 html 文件：

<html> 
  <body> 

    Search some Book <br>
    <input list="testAutocomplete" [(ngModel)]="filtro" >
      <datalist id="testAutocomplete">
        <option *ngFor="let book of books">
          {{ book }}
        </option>    
      </datalist>


    <h1> Search Result </h1>
    <ul>
      <li *ngFor="let book of getBooks()">
        {{ book }}
      </li>
    </ul>
 </body>
</html>

在 Angular 2 中使用自动完成功能进行简单搜索的最佳方法是使用 datalist 标签和 ngFor 来列出选项。这真的很简单。并且不要忘记将 ngModel 作为输入属性，以便在我们的组件方法中使用此值。

OBS：getBooks 方法只是将结果以动态列表的形式显示给用户。

于 2017-03-09T02:10:57.360 回答
0

你的过滤管很好，不需要改变。仅查看“字段”是否获得正确的值。

这是一个例子：

HTML：

<tr class="row" *ngFor="let pipline of piplines | datafilter:
 {Status:searchText}">

控制器.ts

 filterResult(searchText):void
  {
    this.searchText= searchText;
    console.log("filterResult:" + this.searchText);
  }
于 2017-10-17T18:57:26.600 回答