使用angular2自定义自动完成

Question

我正在做一个通用的自动完成，问题是当用户输入输入时，我发出执行过滤器的事件，但不会用其他组件中过滤结果的值更改列表。

过滤结果列表显示我为空，但通过代码该对象正确返回它。

Component autocomplete.component.ts:
import { Component, OnInit,ElementRef, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  host: {
        '(document:click)': 'handleClick($event)',
    },
})
export class AutocompleteComponent implements OnInit {
  public query = '';
  public filteredList = [];
  public elementRef; 
  private _dataSource:any[];        
  constructor(myElement: ElementRef) {
      this.elementRef = myElement;
  }

  @Output() changeFilter = new EventEmitter<any>();
  @Input()
  dataSource:any[];

  ngOnInit() {  
    this._dataSource = this.dataSource;
  }


  filter() {    
      if (this.query !== ""){
          this.filteredList = this._dataSource.filter(function(el){
          //___________________________________ This is my emit event:
           return this.changeFilter.emit({el:el, query:this.query});           
          }.bind(this)); 
      }else{
          this.filteredList = [];
      }  
  }

  filterAll(){
     this.filteredList = this._dataSource;
  }

  select(item){
      this.query = item.nombre;
      this.filteredList = [];
  }

  handleClick(event){
    var clickedComponent = event.target;
    var inside = false;
    do 
    {
        if (clickedComponent === this.elementRef.nativeElement) 
        {
            inside = true;
        }
      clickedComponent = clickedComponent.parentNode;
    } while (clickedComponent);

    if(!inside)
    {
      this.filteredList = [];
    }
  }
}


Component autocomplete.component.html:
  <div class="container">
    <div class="input-field col s12">
      <input id="clienteAut" type="text" class="form-control bs-autocomplete" style="width:300px;" [(ngModel)]="query" (keyup)="filter()" on-click="filterAll()">
      <label for="clienteAut"></label>
    </div>
    <div class="divLista" *ngIf="filteredList.length > 0" style="">
      <div class="divFila" *ngFor="let item of filteredList">
        <ul >
          <li>
            <a (click)="select(item)">{{item.CodigoCliente}} - {{item.Nombre}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

组件“busquedacopiadoras.component.ts”：

import { Component, Input, Output, OnInit } from '@angular/core';
import { ClienteModel } from './../../shared/models/cliente.model';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Observable } from 'rxjs/Observable';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

//servicios
import { ComunService } from './../../shared/services/comun/comun.service';

@Component({
    selector: 'app-busquedacopiadoras',
    templateUrl: './busquedacopiadoras.component.html',
    styleUrls: ['./busquedacopiadoras.component.css'],
    providers: [ComunService]

})
export class BusquedaCopiadorasComponent {          
    constructor(private _comunService: ComunService) {}          
    clientes: Array<any> //= [];
    clienteModel: ClienteModel = new ClienteModel();

    ngOnInit() {
        //getClientes is OK
       this._comunService.getClientes()
            .subscribe((clientesData) => {
                this.clientes = clientesData as ClienteModel[];
                //this.rellenarMarcas(marcasData);
            });          
    }       
    onChangeFilterClientes(cli:any){
     return (cli.el.Nombre.toString().toLowerCase().indexOf(cli.query.toLowerCase()) > -1 || cli.el.CodigoCliente.toString().toLowerCase().indexOf(cli.query.toLowerCase()) > -1);
   }
}

Component "busquedacopiadoras.component.html":
<div class="campo-formulario">      
<app-autocomplete *ngIf="clientes" [dataSource] ="clientes" 
(changeFilter)="onChangeFilterClientes($event)"></app-autocomplete>
</div>

Answer 1

我写了一个基于类似组件。你可以看看这里。它按预期工作：

https://dashboard.heroku.com/apps/ng-auto-complete

Git 中心： https://github.com/atapas/ng-auto-complete