*div class 中的 Ngfor 不工作 - Angular 6 和 Bootstrap

Question

我正在 Angular 中实现 REST 服务。一切正常。这部电影是一个 JSON 对象，正如您在图片下方看到的那样。我无法设法在框 (ngif) 中打印结果，但我可以在 ngfor.正如我所说，一切正常，除了这个：

<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>

我不会上传所有代码，因为它太冗长了。我想在 div class 中有这个 ngFor（所以如果我有两部电影，就会有两个 "tables"。

我真的不知道为什么； *ngIf 也不行。

我试过将 ngfor 放在 div class（第二个）中，但无论如何都不起作用...

我在REST服务中获取的"Interstellar"情况下的JSON内容，是下一个：[{"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"}]

这就是我得到它的方式（你无法得到它，因为我在另一个项目中实现了它）。

@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()));
    }

Answer 1

您的日志 (<p *ngFor="let film of film">...</p>) 表明 film 是一个对象数组。因此，以下应该有效：

<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>

*div class 中的 Ngfor 不工作 - Angular 6 和 Bootstrap

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

angular-ng-if

angular-bootstrap

bootstrap-4

ngfor

angular