Angular2自动建议器答案

【问题标题】：Angular2 Auto suggesterAngular2自动建议器
【发布时间】：2017-10-26 02:36:42
【问题描述】：

我在 INTERNET 上进行了很多搜索，但仍然无法弄清楚如何在没有任何第三方的情况下制作自定义自动建议器。经过大量谷歌我发现this

但问题是我的 api 响应有点不同，我得到的响应是：

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

因此，我将 [object][object] 作为管道中的值。

谁能帮助我如何用这个管道处理这个请求。我希望他们应该是一个文本框，点击它应该有列表，并且在用户输入时，以下建议可能会有所不同。

管道：

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 数组是不同的，如上所述。

【问题讨论】：

您想按名称属性过滤吗？如果是这样，只需将 el.toLowerCase() 替换为 el.name.toLowerCase() 即可。
让我试试，顺便谢谢你的回复
是的，非常感谢。我需要做更多的改变，我会尝试。谢谢

标签： json angular typescript angular2-template angular2-forms

【解决方案1】：

您可以尝试类似下面的方法

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

您可以根据需要更新管道。

【讨论】：

【解决方案2】：

鉴于数据源是一个对象数组，为了实现动态，我将使用以下管道迭代每个对象的值，然后如果找到匹配项，将保留对象以供显示：

管道

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 声明。这告诉管道连续过滤数据，所以如果你有一个服务动态地将数据推送到你的数据源中，你的过滤显示将自动更新。同样使用这样的管道，您可以过滤对象的所有值，并且对象可以动态更改结构而不会影响您的过滤器。

【讨论】：