Angular2自動提示器

我一直在INTERNET上搜索很多，但仍然無法弄清楚如何在沒有任何第三方的情況下自定義自動提示器。經過大量的谷歌，我發現this Angular2自動提示器

但問題是，從API我的反應是有點不同的我得到的反應是：

[{"id":"1","name":"aa"},{"id":"2","name":"bb"}...]

由於這我得到[對象] [對象]作爲管道中的值。

任何人都可以請幫助我如何處理這個請求與這個管道。我希望他們應該是一個文本框，在其上應該列出的點擊和用戶輸入上，下面的建議可能會有所不同。

管：

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.toLowerCase().indexOf(input) > -1; 
     }) 
    } 
    return value; 
} 
}

在TS：

import { Component } from '@angular/core'; 
import {FilterPipe} from './pipes' 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 
    export class AppComponent { 
title:String; 
names:any; 
constructor(){ 
    this.title = "Angular 2 simple search"; 
     this.names =   ['Prashobh','Abraham','Anil','Sam','Natasha','Marry','Zian','karan'] 
    } 
}

***這個完美的作品，但我的情況this.name陣列是輸精管如上說。

來源

2017-05-25 Narendra Vyas

是否要過濾名稱屬性？如果是這樣，只需用'el.name.toLowerCase（）'替換'el.toLowerCase（）'，它就可以工作。 – developer033

讓我試試，順便謝謝回覆 –

是的，它表示非常感謝。我需要做一些更改，我會嘗試。謝謝 –

鑑於數據源是對象的數組，是動態的，我將使用下面的管，這將重複對值中的每個對象，那麼如果發現匹配將保持對象進行顯示：

管

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

@Pipe({ 
    name: 'filter', 
    pure: false 
}) 
export class FilterPipe implements PipeTransform { 

    transform(items: Array<any>, filter: string): any { 
    if (!filter) { 
     return items; 
    } 
    return items.filter(item => { 
     for (let field in item) { 
     if (item[field] === null || item[field] === undefined){ 
      continue; 
     } 
     if (item[field].toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1) { 
      return true; 
     } 
     } 
     return false; 
    } 
    ); 
    } 
}

HTML

<input type="text" [(ngModel)]="search" placeholder="Filter..."> 
<div *ngFor="let item of datasource | filter:search"></div>

看pure: false申報管道。這會告訴管道持續過濾數據，因此如果您有一個將數據動態推送到數據源的服務，則過濾後的顯示會自動更新。同樣使用這樣的管道，您可以過濾所有對象的值，而對象可以動態更改結構，而不會影響過濾器。

來源

2017-06-26 17:26:34 BogdanC

您可以嘗試類似的東西像下面將要搜索

<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type"> 
    <ul> 
    <li *ngFor="let n of list | FilterPipe: queryString : searchableList "> 
     {{n.name}} ({{n.id}}) 
    </li> 
    </ul>

通必填字段

this.searchableList = ['name','id']

管

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

@Pipe({ 
    name: 'FilterPipe', 
}) 
export class FilterPipe implements PipeTransform { 
transform(value: any, input: string,searchableList : any) { 
    if (input) { 
    input = input.toLowerCase(); 
    return value.filter(function (el: any) { 
    var isTrue = false; 
    for(var k in searchableList){ 
    if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){ 
     isTrue = true; 
    } 
    if(isTrue){ 
     return el 
    } 
    } 
    }) 
} 
return value; 
} 
}

您可以根據自己的需要更新的管道。

More Info

來源

2017-10-05 05:47:27 Prashobh

Angular2自動提示器

回答

相關問題