I am new to angular and i am facing issue where Angular16 does not display the properties of an object when defined in an external class. Check out the following illustration.

I have defined a class in the following manner. I use this class to store data i receive from the backend. These values are reused in other components.

export class StaticClass {
    static dict:{[key: string]: Array<object> } = {
        1: [],
        2: [
            { id: 1, text: "Hello" },
        ],
        3: [],
}}

I then import this class to use the values stored.

import { Component } from '@angular/core';
import { StaticClass } from 'src/app/utils/calendarEvents';

@Component({ ..<omitted>.. })
export class SampleViewComponent {
    staticClass = StaticClass;
    temp = [{ id: 1, text: "Hello" }]


   constructor(){
        console.log(this.staticClass.dict[2])
        console.log(this.temp)
    }
}

Here, both console outputs displays the same thing.
However, TS throws me an error when i try to display the values in staticClass.

<div *ngFor="let i of this.staticClass.dict[2]">
    {{ i.id }}
</div>

Property ‘id’ does not exist on type ‘object’.ngtsc(2339)

But it works just fine when using temp.

<div *ngFor="let i of this.temp">
    {{ i.id }}
</div>

Questions:

1. How can we rectify the above issue? What is different between temp and staticClass.dict[2]
2. Is there a better way to store the values i receive from backend? Since these are going to be temporary and changing throughout, i don’t want to use browser local storage.