Estoy construyendo un componente web con una plantilla basada en reaccionar. El valor se emite pero se muestra indefinido en el componente cuando estoy llamando.
@Event() newModuleClicked: EventEmitter<any>; handleClick(e) { this.newModuleClicked.emit(e); //data is coming here when clicked } <ul class="portal-navigation__scrollable"> {this.dataNavigation.map((item) => ( <li key={item.id} onClick={() => this.handleClick(item.Name)}> {item.Name} </li> ))} </ul>El componente al que estoy llamando se muestra indefinido
<navigation [dataNavigation]="data" (newModuleClicked)="onChange($event)" ></navigation> onChange(ev: any) { console.log('got data', ev.target.value); //undefined }El valor que pase a .emit() estará en la propiedad de detail del CustomEvent que emite el componente Stencil. Entonces, para obtener el nombre real, simplemente reescriba su controlador de eventos para:
onChange(ev: any) { console.log('got data', ev.detail); } También puede darle al evento un tipo más específico de CustomEvent<any> ( any se deriva de la declaración de evento de EventEmitter<any> ):
onChange(ev: CustomEvent<any>) { console.log('got data', ev.detail); }