How to iterate through properties declared in an Interface in Angular 12?

Question

How to iterate through properties declared in an Interface in Angular 12?

Before Angular 12, this functioned properly:

export interface Content {
    categories: string[]
    concepts: Topic[]
    formulas: Topic[]
    guides: Topic[]
}

//this.content is of type Content
['formulas', 'concepts'].forEach(c => {
      this.content[c].forEach(topic => {
//....
      });
    })

However, it now triggers an error (For the line this.content[c]):

An 'any' type is implicitly related to 'Element' because an expression of type 'string' cannot be used to index type 'Content'. No index signature with a parameter of type 'string' was found on type 'Content'.ts(7053)

How can I inform Typescript that this.content[c] is an array containing instances of Topic?

javascript angular typescript

Answer 1

Answer №1

Implement it in this manner:

['methods', 'theories'].forEach(m => {
    this.data[m as keyof Data].forEach(item => {
        //....
    });
})

Answer 2

Implement it in this manner:

['methods', 'theories'].forEach(m => {
    this.data[m as keyof Data].forEach(item => {
        //....
    });
})

Answer 3

Answer №2

After considering various options, I made a final decision on the design:

interface DataContainer {
    types: string[]
    topicsByType: Data
}

interface Data {
    [categoryKey: string]: Topic[]
}

This adjustment ensures that every string key corresponds to an array of Topic objects.

Answer 4

After considering various options, I made a final decision on the design:

interface DataContainer {
    types: string[]
    topicsByType: Data
}

interface Data {
    [categoryKey: string]: Topic[]
}

This adjustment ensures that every string key corresponds to an array of Topic objects.

How to iterate through properties declared in an Interface in Angular 12?

Answer №1

Answer №2

Similar questions

Offspring maintain a certain position within the larger framework of their parent on a

Having trouble launching the freshly developed Angular app

I possess legacy Angular 1 code in which I implemented div styles. How can I replicate the same functionality in Angular 11?

Issue with Vue parent component's inability to listen to event emitted by child component

Observable subscription results in a return of undefined

The mouseup event fails to trigger upon dropping a component with React-dnd

Use Vue JS to send a GET request to the server with custom header settings

Typescript: The property 'userId' is not found within the 'unknown' type

What is the best way to extract HTML using selenium.webdriver in Python?

Ways to maintain group settings for a Telerik MVC Grid connected to Ajax

angular feature module triggers rerouting only on site refresh

How to handle the discrepancy between NextJS exporting files with a .html extension, yet in the <Link> component there is no .html specified

Is there a way I can invoke my function prior to the form being submitted?

What is the method to showcase every single word?

Getting a multidimensional array from JSON in Typescript: A step-by-step guide

Component's state not reflecting changes after dispatching actions in Redux, though the changes are visible in the Redux DevTools

Working with iFrames through Splinter/Selenium in Python

Converting a json array into a map with the help of Underscore.js

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

Properly handling curves in THREE.JS to ensure efficient disposal