What would be the way to do the ngFor in angular 5

Question

What would be the way to do the ngFor in angular 5

Navigation

#1 by (1 votes)

-1

I'm with a big question, how could I show data in the following way

from the following array:

peliculas = [
        {
            "pelicula": "Batman v. Superman",
            "director": "Zack Snider",
            "anio": "2016",
            "autor":
                [
                    {
                        "usuario": {
                            "nombre":"Mario 1",
                            "pais":"Canada"
                        }
                        
                    },
                    {
                        "usuario": {
                            "nombre":"Mario 2",
                            "pais":"USA"
                        }
                    }
                ]
        },
        {
            "pelicula": "La verdad duele",
            "director": "Will Smith",
            "anio": "2015",
            "autor":
                [
                    {
                        "usuario": {
                            "nombre":"Juan 1",
                            "pais":"Canada"
                        }
                        
                    },
                    {
                        "usuario": {
                            "nombre":"Juan 2",
                            "pais":"USA"
                        }
                    }
                ]
        }
];

I'm using Angular 4

angularjs-2.0 angular4

asked by Juan Manuel Cuba NewMan 22.01.2018 в 01:30

source

1 answer

Problems with border-radius property in table Encrypt a url parameter in laravel

score 1 · Accepted Answer

I give you an example of how it was that I managed to capture it on the Front End side, using the same arrangement you showed in your question

<div *ngFor="let item of peliculas">
  <p>{{item.anio}}</p>
  <p>{{item.director}}</p>
  <p>{{item.pelicula}}</p>
  <div *ngFor="let autor of item['autor']">
    <p>{{autor['usuario'].nombre}}</p>
    <p>{{autor['usuario'].pais}}</p>
  </div>
  <hr>
</div>

The design that you want to give, depends on you, I hope it helps you.