動態值角度2的篩選器列表

我創建列表中的角度2，並希望過濾數據時，我把值放入輸入文本，但我的代碼不工作。我用管道來過濾它。請告訴我做錯了什麼。動態值角度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目前

來源

2016-11-13 user6751153

提供一個plunker或的jsfiddle - 那麼它是一個更容易幫助你。 –

好吧首先從來沒有用戶管道過濾或命令任何數組或其他對象，你有。如果你是從巴西只是看這個類：

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>

做與角2自動完成一個簡單的搜索，最好的方法是使用數據列表標籤和ngFor到列出選項。這很簡單。並且不要忘記ngModel作爲輸入屬性來在我們的組件中使用這個值。

OBS：getBooks方法只是在動態列表中向用戶顯示結果。

來源

2017-03-09 02:10:57

對於我們這些不是來自巴西的人，你們能否分享爲什麼我們不應該使用管道？謝謝。 – sabzeta

我沒有解釋，因爲我不明白爲什麼你不應該使用管道。我認爲這與表現有關。 @sabzeta –

您的過濾管很好，不需要更改。只有看看「領域」是否得到正確的價值。

這裏有一個例子：

HTML：

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

controller.ts

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

來源

2017-10-17 18:57:26

動態值角度2的篩選器列表

回答

相關問題