* div类中的Ngfor不起作用 - Angular 6和Bootsrap-Java 学习之路

我正在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 （所以如果我有2部电影，那么将有2个"tables" . 我真的不知道为什么， *ngIf 也没有工作 .

enter image description here

我已经尝试将 ngfor 放在 div class （第二个）但是它没有任何作用......

在我的休息服务中获得的"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()));
    }

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>

回复于 2024-04-28T10:00:54+08:00

* div类中的Ngfor不起作用 - Angular 6和Bootsrap

1 回答

相关问题