如何在 html angular 组件中显示数组的属性值

Question

I need to show a property of an array this property has other propertys like: id, name, slug I need to show the name of genres

<div class="card-columns">
    <div class="card" *ngFor="let game of gameslist">
        <img class="card-img-top" [src]="game.background_image" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">
                {{ game.name}}
            </h5>
            <p class="card-text">Platform Release on {{ game.platforms[1].platform}}</p>
            <p class="card-text">Release date {{ game.platforms[1].released_at}}</p>
            <p class="card-text" *ngFor="let game of game.genres">Genere {{ game.genres}}/p>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

How can I show the name of genres if genres is an array that can have varios items each one with a name property in angular 9?

Answer 1

I fixed the bug with <p class="card-text" *ngFor="let genres of game.genres">Genere {{ genres.name}}</p>