0
votes

Boucle à travers un objet imbriqué de manière angulaire

Je veux parcourir l'objet imbriqué.

<div *ngFor="let movie of movies" class="container">
    <table   class="table">
        <tbody>
            <tr >
                <th><img src="#"></th>
                <td >{{movie.movieRating.rating9}}</td>
            </tr>
        </tbody>
   </table>
</div>

Ceci est mon fichier HTML

"movieRating": {
"rate": [{ 
    "rating9": 9,
    "count9": 158
}, {
    "rating8": 8,
    "count8": 101
}, {
    "rating7": 7,
    "count7": 32
}, {
    "rating6": 6,
    "count6": 48
}, {
    "rating5": 5,
    "count5": 125
}],
"totalCount": 456}

Si j'essaye {{movie.movieRating.rating9}} cela ne fonctionne pas. Mais {{movie.movieRating.totalCount}} fonctionne. Existe-t-il un moyen d'obtenir rating9 et count9.

javascript typescript angular node.js ngfor

2 commentaires

Voulez-vous seulement 9 ou d'autres aussi?

Actuellement, je ne le teste que pour Count9 et Note9.

3 Réponses :

2
votes

Rating9 est en position 0 du tableau de taux, donc pour y accéder, vous pouvez utiliser {{movie.movieRating.rate [0] .rating9}} . {{movie.movieRating.rate [0] .rating9}} . < pré> XXX

0 commentaires

0
votes

movieRating a une propriété appelée rate , qui est une liste de évaluations . Donc, ce serait comme movie.movieRating.rate [0] .rating9 .

Mais la partie HTML que vous avez postée dans cette question ne donnera qu'une seule ligne, c'est rating9 La ligne de , alors ce n'est pas la peine de boucler. Alors généralisez votre objet rate comme ci-dessous:

<div *ngFor="let rating of movies.movieRating.rate" class="container">
    <table   class="table">
        <tbody>
            <tr >
                <th><img src="#"></th>
                <td >{{rating}}</td>
            </tr>
        </tbody>
   </table>
</div>

Il serait donc très facile de faire une boucle également dans le futur .. comme ci-dessous: p >

"rate": {
    "rating": 9,
    "count": 158
}

0 commentaires

0
votes

Lors de l'accès aux éléments du tableau d'objets imbriqués, vous devez d'abord parcourir le tableau principal dans votre cas, ses "films". Ensuite, vous devez parcourir le tableau imbriqué appelé "rate" à l'intérieur de l'objet film, puis vous pouvez accéder aux valeurs de taux comme suit.

Votre tableau imbriqué.

<div *ngFor="let movie of movies" class="container">
    <table   class="table">
        <tbody>
            <tr *ngFor="let rate of movie.movieRating.rate" >
                <th><img src="#"></th>
                <td >{{movie.movieRating.rating9}}</td>
            </tr>
        </tbody>
   </table>
</div>

Modifié code html

movies:[{
 "movieRating": {
   "rate": [{ 
     "rating9": 9,
     "count9": 158
    }, {
     "rating8": 8,
     "count8": 101
    }, {
     "rating7": 7,
     "count7": 32
    }, {
     "rating6": 6,
     "count6": 48
    }, {
     "rating5": 5,
     "count5": 125
    }],
   "totalCount": 456}
}]

0 commentaires