EventEmitter cannot emit an object with KeyValuePair property in Angular

Question

I want to fill and emit an object that has 2 property; 1. string 2.array of KeyValuePair by EventEmitter in Angular version 9.

My object's class:

    import { KeyValuePair } from './keyValuePair';

      export class SelectedApiCall {

      public identifier: string;
      public predefinedParameters: Array<KeyValuePair<string, string>> | undefined;

      constructor(identifier: string, predefinedParameters: Array<KeyValuePair<string, string>>) 
      {
        this.identifier = identifier;
        this.predefinedParameters = predefinedParameters;
       }
    }

TS:

        apiCall: IApiCallHistory | undefined;
        @Output() selectedApiCallChange = new EventEmitter<SelectedApiCall>();

        getApiCall(identifier: string) {
    const parametersKeyValuePair = new Array<KeyValuePair<string, string>>();
    
    this.sapEtService.getApiCallHistoryById(identifier)
        .subscribe(apiCall => {
            this.apiCall = apiCall;
            for (let parameter of this.apiCall.apiCallWithParameters.apiCallParameters) {
                parametersKeyValuePair.push(
                    new KeyValuePair<string, string>(
                        parameter.identifier,
                        parameter.value
                    ));
            }
            let selectedApiCall = {
                identifier: identifier,
                predefinedParameters: parametersKeyValuePair
             }

            console.log('parametersKeyValuePair:::: ', parametersKeyValuePair);
            console.log('selectedApiCall.predefinedParameters:::: ', selectedApiCall.predefinedParameters);


            this.selectedApiCallChange.emit(selectedApiCall);
        });
       this.selectedApiCallChange.subscribe(data => {
        console.log('this.selectedApiCallChange in ApiCall History:::: ', data);
    });
}

Console:

  parametersKeyValuePair::::  [{…}]0: {key: 'CustomerID', value: '123'}length: 1[[Prototype]]: Array(0) ---->**Here Array has value**
    main.js:1 
    selectedApiCall.predefinedParameters::::  [{…}]0: {key: 'CustomerID', value: '123'}length: 1[[Prototype]]: Array(0)---->**Here Array has value too**


    this.selectedApiCallChange in ApiCall History::::  
    {identifier: 'tickets_get_customer', predefinedParameters: Array(1)}
    identifier: "tickets_get_customer"
    predefinedParameters: Array(0)length: 0 -------> **Array is Empty***
    [[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
    [[Prototype]]: Object[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ ()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

As shown in the console, after emit the object, the length of the array is zero and the array values are not emit correctly.

score 0 · Answer 1 · answered Sep 23 '21 at 09:01

You're not using your SelectedApiCall class correctly. If you declare a class with a constructor, you need to use the new keyword to create a new instance. Instead, replace it with a type:

export type SelectedApiCall = {
  identifier: string;
  predefinedParameters: Record<string, string>[] | undefined;
};

That way, the following line of code from your TS file should work as intended:

let selectedApiCall = {
  identifier: identifier,
  predefinedParameters: parametersKeyValuePair
}

Also, it's a little hard to debug without seeing your implementation of KeyValuePair. There are several typescript-native implementations that you could use instead:

They both end up meaning the same thing but I personally prefer the Record syntax as it is cleaner.

EventEmitter cannot emit an object with KeyValuePair property in Angular

1 Answers1