I have an array of objects,

movies = [
    {
    "_id": "61581aa12bee6cbe7b453d1d",
    "movie_title": "Master",
    "genres_list": [
    "Drama"
    ]
    },
    {
    "_id": "615c7f5fbc3bf7d026ee7f7e",
    "movie_title": "Sarpatta Parambarai",
    "genres_list": [
    "Drama",
    "Action",
    "Sports"
    ]
    },
    {
    "_id": "616d57c5653c0a4a55d9cb33",
    "movie_title": "OK Kanmani",
    "genres_list": [
    "Romance",
    "Drama",
    "Feel Good"
    ]
    }]

I want to display all the genres_list .

My code:

<div *ngFor="let movie of movies">
<span>{{movie.movie_title}}</span>
<div *ngFor = "let genre of movie.genres_list; let i=index">
<h2>{{genre[i]}}</h2>
</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I want to display all the genres_list values. Thank you :)

CodePudding user response：

Just use <h2>{{genre}}</h2> in your html. Doing {{genre[i]}} is essentially treating the genre string as a character array and only prints out a single character of the string at index i.