I have stored some strings on an object in my environment file for global use.
Here is the content of my environment.ts:
export interface RegionNames {
br: any;
bo: any;
}
export const environment = {
production: false,
region_id: "br",
};
export const region_phrases: RegionNames = {
br: {
"string1": "A",
"string2": "B",
"string3": "C",
"string4": "D",
"string5": "E",
},
bo: {
"string1": "AA",
"string2": "BB",
"string3": "CC",
"string4": "DD",
"string5": "EE",
}
}
In the component script, I can successfully access the strings from the object using this code:
console.log(region_phrases[environment.region_id as keyof RegionNames].string1);
However, when I try to run the same code in the HTML template, it throws an error:
Error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'RegionNames'. No index signature with a parameter of type 'string' was found on type 'RegionNames'.
<span class="visually-hidden">{{ region_phrases[environment.region_id as keyof RegionNames].string1 }}</span>
I don't want to create variables for the object in every component just to access it in the HTML. Is there a simpler way to resolve this issue?