Return 值使用 EventEmitter angular2

Question

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

这是de chid组件"autocomplete.component.ts:" //当this.changeFilter.emit中的returns时，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" return一个有数据的list，但是当它return传给子组件的eventEmitter时this.filteredList是undefined //有什么想法吗？

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

尝试以下操作：

export class 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"

Return 值使用 EventEmitter angular2

Return values using EventEmitter angular2

angular

eventemitter

emit