There is a property set up as follows:
const carac = new Map<string,string>();//Defining the property
carac.set("Color", "Blue"); // Setting key value
carac.set("age", "99") // Assigning another key value
An array is also initialized like this:
caracteristicas:Map<string, string>[];
Then the property is pushed inside the array in the following manner:
caracteristicas.push(carac);
In the HTML code, there is an iteration over the array to display the keys and values, achieved with the following code:
<tr *ngFor="let caracteristica of caracteristicas | keyvalue ; let i = index">
<td>
{{caracteristica.key}}
</td>
<td>
{{caracteristica.value}}
</td>
<td>
<button (click)="quitarCaracteristica(i)">
<i class="fas fa-minus"></i>
</button>
</td>
</tr>
Despite using the key value pipe, the functionality does not work when running the application. Instead of displaying the keys and values, it shows something like: [object Map]. Any suggestions on how to properly showcase the keys and values are appreciated. The Angular version being utilized is 9. Thank you in advance.