Question

我是在角度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",
    }
  ];

我目前使用的是角度2.0.0

Answer 1

Ok首先，永远不要使用管道过滤或订购任何阵列或其他对象。如果您来自巴西，请观看此课程：

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只是在动态列表中向用户显示结果。

Answer 2

您的过滤管道很好，不需要进行任何更改。只看＆＃34;字段＆＃34;得到了正确的价值。

这是一个例子：

<强> HTML：

 filterResult(searchText):void
  {
    this.searchText= searchText;
    console.log("filterResult:" + this.searchText);
  }

<强> controller.ts

re.split

具有动态值角度2的过滤器列表

2 个答案: