This is a sample component class:
export class AppComponent {
categories = {
country: [],
author: []
}
constructor(){}
getOptions(options) {
options.forEach(option => {
const key = option.name;
this.categories[key].push(option.value);
})
}
}
When a button is clicked, the getOptions(options) function is called from a different component. The structure of the options object is as follows:
options = [
{name: 'country', value: 'Germany'},
{name: 'author', value: 'Franz Kafka'}
]
As a result, the values of this.categories are updated like so:
this.categories[country] = ["Germany"]
this.categories[author] = ["Frank Kafka"]
Each time the button is clicked, the value of options changes. However, when new values are sent for options such as:
options = [
{name: 'country', value: 'Japan'},
{name: 'author', value: 'Masashi Kishimoto'}
]
The old value for this.categories[country] does not get saved. The expected new value for this.categories[country] should be ["Germany", "Japan"], but it is only ["Japan"].