Angular 6+Bootstrap中div类内*ngFor失效及*ngIf不显示问题

看起来你遇到的核心问题是变量命名冲突和对数组类型数据的错误访问，导致*ngIf无法正确渲染单条影片详情，同时你想要的“每部影片对应独立列表容器”的结构也没生效。咱们一步步来解决：

1. 核心问题拆解 #

• 你的接口返回的是JSON数组（哪怕只有一条数据），但模板里直接用film.title访问属性——这是错误的，因为film是数组，不是单个影片对象。
• *ngFor="let film of film"存在变量名冲突：循环变量film会覆盖外部的数组变量film，导致后续代码逻辑混乱。
• 你想要的“独立列表容器”需要把*ngFor绑定到div.list-group上，而不是内部的<p>标签。

2. 具体修复步骤 #

第一步：修正组件变量与订阅逻辑 #

首先把组件中存储影片的变量名改成films（语义化+避免冲突），并确保订阅接口时把返回的数组正确赋值：

// 组件.ts文件示例
import { Component } from '@angular/core';
import { ServicioRest } from './servicio-rest.service';

@Component({
  selector: 'app-film-search',
  templateUrl: './film-search.component.html'
})
export class FilmSearchComponent {
  films: any[] = []; // 用数组类型存储影片列表

  constructor(private servicioRest: ServicioRest) {}

  getFilm(title: string) {
    this.servicioRest.getFilm(title).subscribe(
      (data) => {
        this.films = data; // 直接赋值数组
      },
      (error) => {
        console.error('获取影片失败:', error);
        this.films = []; // 出错时清空列表
      }
    );
  }
}

第二步：重构模板结构 #

把*ngFor绑定到div.list-group上，让每个影片生成独立的列表容器，同时修正属性访问方式：

<button (click)="getFilm(title.value); title.value=''">Buscar Pelicula</button>
<div class="col-md-6">
  <!-- 每部影片对应一个独立的list-group容器 -->
  <div class="list-group" *ngFor="let movie of films">
    <p class="list-group-item">Titulo: {{movie.title}}</p>
    <p class="list-group-item">Year: {{movie.year}}</p>
    <p class="list-group-item">Director: {{movie.director}}</p>
    <p class="list-group-item">Reparto: {{movie.reparto}}</p>
    <p class="list-group-item">Urlvideo: {{movie.urlvideo}}</p>
    <p class="list-group-item">Imagen: <img [src]="movie.urlimagen" alt="{{movie.title}}"></p>
  </div>

  <!-- 无影片时显示提示 -->
  <div *ngIf="films.length === 0" class="alert alert-info">
    No se encontraron películas.
  </div>
</div>

第三步：优化服务代码（可选，针对Angular 4.3+） #

如果你的项目用的是新版Angular，建议换成HttpClient（自动解析JSON，无需手动map）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ServicioRest {
  constructor(private http: HttpClient) { }

  getFilm(title: string): Observable<any[]> {
    const url = `http://localhost:8080/buscar/${title}`;
    return this.http.get<any[]>(url); // HttpClient自动处理JSON解析
  }
}

3. 关键说明 #

• 变量名冲突：用movie作为循环变量，films作为数组变量，彻底避免作用域混淆。
• *ngIf的正确用法：通过films.length === 0判断是否有影片数据，而不是直接判断数组是否存在（空数组也是“存在”的）。
• 图片绑定：用[src]代替插值表达式{{}}，这是Angular推荐的属性绑定方式，更安全且符合框架规范。

内容的提问来源于stack exchange，提问作者M.K