動的値を持つフィルタリスト2

私は角度2でリストを作成していますが、入力テキストに値を入れてもコードは機能していません。フィルタを使用してパイプを使用しています。。入力テキストによるフィルタ動的値を持つフィルタリスト2

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

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; 
    }); 
    } 
}

配列リスト私は現在角2.0.0を使用しています

出典

2016-11-13 user6751153

plunkerまたはjsfiddleを提供する - それはあなたを助けるためにはるかに簡単です。 –

あなたが持っている配列やその他のオブジェクトをフィルタリングしたり、並べ替えたりするためのパイプです。あなたがブラジルからしている場合だけ、このクラスを見て：あなたはフィルタリングしていないか、パイプを使って何を注文するんなぜ

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

この女の子は説明しています。

これで、オートコンプリートで正しい入力を作成し、同時にユーザー入力値をフィルタリングしましょう。

この例では、ユーザーは書籍アレイの1つの書籍を検索します。

これはコンポーネントである：角2でオートコンプリートを持つ単純な検索を行うための最善の方法は、にデータリストタグとngForを使用している

<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>

：

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ファイルでありますオプションを一覧表示します。それは本当に簡単です。そして、コンポーネントの中のメソッドでこの値を使うために、入力属性として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

答えて

関連する問題