代码之家 › 专栏 › 技术社区 › M.K

*ngfor in div类不工作-角度6和引导

angular-ng-if angular-bootstrap ngfor bootstrap-4 angular

0

M.K · 技术社区 · 7 年前

我在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类 (第二个),但它不起作用…

我在REST服务中获得的“星际”的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 回复 | 直到 6 年前

1

tilo 7 年前

你的日志( <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>