Issue
when i tried to pass info from a child to a parent using event emmiter and Output i get this error:
Argument of type 'Event' is not assignable to parameter of type 'string[]'.
Type 'Event' is missing the following properties from type 'string[]': length, pop, push, concat, and 29 more.ngtsc(2345)
this is the child code
@Component({
selector: 'app-calculator-buttons',
templateUrl: './buttons.component.html',
styleUrl: './buttons.component.css'
})
export class ButtonsComponent {
public firstRow:string[]=["7","8","9","+","="];
public secondRow:string[]=["4","5","6","*","/"];
public thirdRow:string[]=["1","2","3","-","AC"];
public fourthRow:string[]=["0",".","(",")"];
@Output()
public onNewresult:EventEmitter<string[]>=new EventEmitter();
public screenValues:string[]=[];
apagar():void{
console.log("Apagado");
let pantalla=document.getElementById("pantalla") as HTMLInputElement;
pantalla.value="";
}
operaciones():void{
let pantalla=document.getElementById("pantalla") as HTMLInputElement;
this.screenValues.unshift(pantalla.value);//añado el valor de la operacion al princio del array
let operacion:number=eval(pantalla.value);//eval trasfoma una cadena en una operacion matematica
pantalla.value=operacion.toString();
this.screenValues[0]+="= "+pantalla.value;
this.emitResult();
//usar services para pasar datos desde buttons hasta screen
}
monitor(index:string):void{
let pantalla=document.getElementById("pantalla") as HTMLInputElement;
pantalla.value+=index;
}
emitResult():void{
this.onNewresult.emit({...this.screenValues})
}
}
and this is the parent code:
import { Component } from '@angular/core';
@Component({
selector: 'app-main-page',
templateUrl: './main-page.component.html',
styleUrl: './main-page.component.css'
})
export class MainPageComponent {
onNewResult(arreglo:string[]):void{
console.log("Resultado recibido");
console.log({arreglo});
}
}
there is where i use the $event to get the event by child
<div class="container bg-secondary rounded my-2 p-2" id="contenedor">
<calculator-body (onNewResult)="onNewResult($event)"></calculator-body><
<app-calculator-buttons></app-calculator-buttons>
</div>
I am using Angular and Typescript, what can i do to remove that error?
I try to pass an array of strings from a child component to a parent component to do this, I use @Output and EventEmmiter, the method manages to access the child component (the message appears in the console), but it never gets into the component, the error appears that $event is not assignable to the type array of strings
Solution
You have set the event Emitter to string, but you are emitting an object which is confusing. So I converted the code to emit an array, instead of an object.
emitResult(): void {
this.onNewresult.emit([...this.screenValues]);
}
We can change the event onNewResult
argument to string[]
which will solve the issue!
onNewresult(data: string[]): void {
console.log(data);
}
working example below.
child
import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-calculator',
standalone: true,
imports: [FormsModule],
template: `
<input type="text" [(ngModel)]="value"/>
<button (click)="operaciones()">operaciones</button>
`,
})
export class CalculatorComponent {
value = '';
public firstRow: string[] = ['7', '8', '9', '+', '='];
public secondRow: string[] = ['4', '5', '6', '*', '/'];
public thirdRow: string[] = ['1', '2', '3', '-', 'AC'];
public fourthRow: string[] = ['0', '.', '(', ')'];
@Output()
public onNewresult: EventEmitter<string[]> = new EventEmitter<string[]>();
public screenValues: string[] = [];
apagar(): void {
console.log('Apagado');
this.value = '';
}
operaciones(): void {
let pantallaValue = this.value;
this.screenValues.unshift(pantallaValue); //añado el valor de la operacion al princio del array
let operacion: number = eval(pantallaValue); //eval trasfoma una cadena en una operacion matematica
pantallaValue = operacion.toString();
this.screenValues[0] += '= ' + pantallaValue;
this.emitResult();
//usar services para pasar datos desde buttons hasta screen
}
monitor(index: string): void {
let pantalla = document.getElementById('pantalla') as HTMLInputElement;
pantalla.value += index;
}
emitResult(): void {
this.onNewresult.emit([...this.screenValues]);
}
}
parent
import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CalculatorComponent } from './calculator/calculator.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule, CalculatorComponent],
template: `
<app-calculator (onNewresult)="onNewresult($event)"/>
`,
})
export class App {
onNewresult(data: string[]) {
console.log(data);
}
}
bootstrapApplication(App);
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.