angular *ngFor doesnt find array-CodePudding

im making a array out of my localstorage entries and am trying to let ngFor iterate over them. mostly ending up with the error Property 'characters' does not exist on type 'CharactersChecklistComponent'. 6 <div *ngFor=" let character of characters"> Hello</div> thanks in advance for answers :)

Interface : export interface Icharacters{ name: string; naxxramas25?: boolean; naxxramas10?: boolean; os10?: boolean; os25?: boolean; eoe10?: boolean; eoe25?: boolean; ulduar10?: boolean; ulduar25?: boolean; }

get all items from storage function :

`  allStorage() {
    var values = [],
        keys = Object.keys(localStorage),
        i = keys.length;
    while ( i-- ) {
        let tempValue:any = localStorage.getItem(keys[i])
        let tempParsedValue = JSON.parse(tempValue)
        values.push(tempParsedValue);
    }
    console.log(values)
    return values;
  }`

getting character list in the component.ts :

`  ngOnInit(): void {
    var characters = this.CharacterfunctionService.allStorage()
    /* console.log(characters) */
    console.log(Array.isArray(characters))
    /* characters = characters as Icharacters[] */
    console.log(characters)
    }`

component html :

`<div *ngFor=" let character of characters"> Hello</div>`

tried implementing with and without interface which didnt really achieve anything mentionable

CodePudding user response：

characters is not accessible from the HTML of your component if you declare the variable inside ngOnInit(). You would have to do something like this instead:

characters = [];

ngOnInit(): void {
  this.characters = this.CharacterfunctionService.allStorage();
}`