* div类中的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>

我不会上传所有代码，因为它太冗长了。我想在ngFor中使用此div class（如果我有两部电影，则会有两张“表格”。

我真的不知道为什么; *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>