CODEWITHSUNDEEP
angularbootstrap-4ngforangular-bootstrapangular-ng-if
M.K
M.K

Reputation: 1495

*Ngfor in div class not working - Angular 6 and Bootstrap

I am implementing a REST service in Angular. Everything works fine. The film is a JSON object as you can see printed below of the picture. I cannot manage to print the results inside the boxes (ngif), but I can in the ngfor. Everything works fine as I said, except this:

<button (click)="getFilm(title.value); title.value=''">Buscar Pelicula</button>

<div class="col-md-6">
    <div class="list-group">
        <p class="list-group-item" *ngIf='film'>Titulo: {{film.title}}</p>
        <p class="list-group-item" *ngIf='film'>Year: {{film.year}}</p>
        <p class="list-group-item" *ngIf='film'>Director:  {{film.director}}</p>
        <p class="list-group-item" *ngIf='film'>Reparto: {{film.reparto}}</p>
        <p class="list-group-item" *ngIf='film'>Urlvideo: {{film.urlvideo}}</p>
        <p class="list-group-item" *ngIf='film'>Urlvideo: {{film.urlimagen}}</p>

        <p *ngFor="let film of film">{{film.title}}, {{film.year}}, {{film.director}},
        {{film.reparto}},{{film.urlvideo}},<br>Imagen: <img src="{{film.urlimagen}}"></p>
    </div>
</div>

I won't upload all the code as it would be too verbose. I want to have this ngFor in the div class (so if I have two films, there will be two "tables".

I do not really know why; *ngIf is not working either.

Enter image description here

I have tried putting ngfor in the div class (the second one), but it is not working in any way...

The JSON content in the case of "Interstellar" that I obtain in my REST service, is the next one: [{"id":8,"title":"Interstellar","year":"2014","director":"Christopher Nolan","reparto":"Jessica Chastain, Matthew, Matt","urlvideo":"https://www.youtube-nocookie.com/embed/UoSSbmD9vqc","urlimagen":"http://www.fotogramas.es/var/ezflow_site/storage/images/peliculas/interstellar/7193613-12-esl-ES/Interstellar.jpg"}]

And that is how I get it (you cannot get it as I implement it in another project).

@Injectable()
export class servicioRest {

    constructor(private http: Http) { }

    getFilm(title: string){
        let url = "http://localhost:8080/buscar/"+title;
        return this.http.get(url).pipe(map(response => response.json()));
    }

Upvotes: 0

Views: 2225

Answers (1)

tilo
tilo

Reputation: 14169

Your log (<p *ngFor="let film of film">...</p>) suggests that film is an array of objects. As such, the following should work:

<div class="list-group" *ngFor="let filmItem of film">
    <p class="list-group-item" *ngIf="filmItem.title">Titulo: {{filmItem.title}}</p>
    <p class="list-group-item" *ngIf="filmItem.year">Year: {{filmItem.year}}</p>
    <p class="list-group-item" *ngIf="filmItem.director">Director:  {{filmItem.director}}</p>
    <p class="list-group-item" *ngIf="filmItem.reparto">Reparto: {{filmItem.reparto}}</p>
    <p class="list-group-item" *ngIf="filmItem.urlvideo">Urlvideo: {{filmItem.urlvideo}}</p>
    <p class="list-group-item" *ngIf="filmItem.urlimagen">Urlvideo: {{filmItem.urlimagen}}</p>
</div>

Upvotes: 1

Related Questions