Renvoyer les valeurs à l'aide de EventEmitter angular2

Question

J'ai un EventEmitter qui émet un événement dans le composant parent, je le veux du composant parent pour effectuer une série d'instructions et le résultat le renvoie à l'appelant, this.filteredList Je le veux pour contenir la liste retournée par le composant parent mais quand elle retourne, filteredList est indéfini

Ceci est un composant de chid "autocomplete.component.ts:" // Quand retourne dans this.changeFilter.emit, this.filteredList est undefined:

export class AutocompleteComponent implements OnInit { 
    ... 

    public filteredList = []; 

    @Output() changeFilter = new EventEmitter<any>(); 


    filter(){ 
    //This is where I want the filteredList to contain the list returned by the other component: 
    this.filteredList =this.changeFilter.emit({query:this.query}); 
    if (filteredList){ 
     console.log(filteredList); 
     } 
    } 

le modèle:

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

C'est le composant parent « de busquedacompiadoras.component.ts »:

// La fonction « onChangeFilterClientes » retourner une liste avec des données, mais quand il retourne à la eventEmitter du composant enfant présente. filteredList est indéfini // Des idées?

export class BusquedaCopiadorasComponent { 

clientes: Array<any> //= []; 

ngOnInit() { 
    this._comunService.getMarcas() 
     .subscribe((clientesData) => { 
      this.clientes = clientesData as clienteModel[]; 
      //this.rellenarMarcas(marcasData); 
     }); 
}  

onChangeFilterClientes(obj:any):any[]{   
    this.clientesFilter = this.clientes.filter(c => c.Nombre.toString().toLowerCase().indexOf(obj.query)>-1);  
    return this.clientesFilter; 
} 

Answer 1

Effectuez les opérations suivantes:

classe export AutocompleteComponent implémente OnInit {...

@Input() public filteredList = []; 

@Output() changeFilter = new EventEmitter<any>(); 


filter(){ 
//This is where I want the filteredList to contain the list returned by the other component: 
this.changeFilter.emit({query:this.query}); 
} 

Et dans le modèle BusquedaCopiadorasComponent passer le FilteredList comme ci-dessous:

[filteredList]="clientesFilter"