使用EventEmitter angular2

Question

我有一个在父组件中发出事件的EventEmitter，我希望它从父组件执行一系列指令，结果将它返回给调用者， this.filteredList我希望它包含父组件返回的列表，但是当它返回时，filteredList是未定义的

这是de chid组件“autocomplete.component.ts：” //当在this.changeFilter.emit中返回时，this.filteredList未定义：

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

模板：

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

这是父组件“busquedacompiadoras.component.ts”：

//函数“onChangeFilterClientes”返回一个包含数据的列表，但是当它返回到子组件的eventEmitter时，this.filteredList是未定义的 //有什么想法吗？

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

尝试以下方法：

导出类AutocompleteComponent实现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}); 
}

在BusquedaCopiadorasComponent模板中传递filteredList，如下所示：

 [filteredList]="clientesFilter"