I am facing an issue where I am unable to change the value of an object property within a translation JSON file using ngx translate. Despite attempting to update the value dynamically when receiving data from an API, it seems to remain unchanged.
I have tried using both the setTranslation() method and the set() method, but neither seem to work. Although I can see the updated value in the console log after making changes, it does not reflect in the HTML.
Below is a snippet of my TS file:
getDict() {
this.getDictionary.getDictionary('dictionary').subscribe(
res => {
console.log(res);
console.log('ar');
this.translateService.use('ar').subscribe(response => {
let config = [];
for (let i in res) {
if(res[i].language == 'ar') {
config[res[i].key] = res[i].value;
console.log('this is obj ', config);
this.translateService.get(config[res[i].key]).subscribe((result:
String) => {
console.log('tr res ', result);
console.log(this.translateService.get(res[i].key));
this.translateService.set(config[res[i].key],
config[res[i].value], 'ar');
});
}
}
})
this.translateService.getTranslation('ar').subscribe(res => {
console.log('this is the language translation ', res);
});
}
)
}
This is how my HTML looks like:
<div [translate]="'first_name'" [translateParams]="{value: 'world'}"></div>
Here is a snippet from my ar.json file:
{
"admin": {
"first_name": "{{value}}"
}
}
It's important to note that there are no issues with the app module, as it can read the translation file without any problems. The API response has also been reviewed and works smoothly without any errors, allowing me to retrieve data successfully.
Your assistance in resolving this issue would be greatly appreciated. Feel free to ask for further information if needed.