Angular中*ngFor无法渲染Laravel返回的JSON格式图片路径

我正在开发一个Angular前端+Laravel后端的项目，图片路径以JSON字符串格式存储在数据库（示例：["projects\December2022\ZbgxdJRvkrkaMwErATJE.jpg","projects\December2022\ogyKr0B3ICyqoU5uMhoM.jpg"]）。前端能正常显示项目记录，但关联图片无法加载，报错Cannot find a differ supporting object，控制台显示images字段是JSON字符串而非数组。

相关代码 #

Angular Component.ts代码

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-projects',
  templateUrl: `
  <div *ngFor="let project of data[0]">
            <div class="col-xl-6 col-12">
                        <div class="single-project-info">
                            <div class="item-content">
                                <h3 class="item-title">{{project.title}}</h3>
                                <p>
                                    {{project.details}}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-12">
                        <div class="single-project-slider">
                            <div class="carousel">
                             <!-- The images are not showing -->
                                <div class="slide-item" *ngFor="let image of project.images">
                                    <img src="http://localhost:8000/storage/{{image}}" alt="project">
                                </div>
                                
                            </div>
                        </div>
                    </div>
        </div>
`
})
export class ProjectsComponent {
  data:any = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost:8000/api/portfolio').subscribe(data => {
      this.data.push(data);
      console.log(this.data);
    },
    error => console.error(error)
    );
  }

}

Laravel API路由及控制器代码

// routes/api.php
Route::get('/portfolio', [ProjectController::class, 'ng_index']);

// app/Http/Controllers/ProjectController.php
public function ng_index() {
        $projects = Project::orderBy('id', 'DESC')->get();

        return response()->json($projects);
    }

控制台返回的项目数据示例

Array(8)
0: {id: 17, title: 'Carpet & Upholstery Cleaning', slug: 'carpet-and-upholstery-cleaning', images: '["projects\\\\December2022\\\\VpBN8B67TmjrgvdviAdw.jpg…rojects\\\\December2022\\\\sjCz7dBTKxTVoamiZbXP.jpg"]', details: 'Refurbishment of upholstery & carpet in a luxury w… state of the upholstery and carpets in the wing.', …}
...

解决方案 #

方案1：后端（Laravel）处理推荐 #

直接在Laravel的Project模型中添加属性转换，让框架自动将数据库中的JSON字符串转为数组：

// app/Models/Project.php
class Project extends Model
{
    protected $casts = [
        'images' => 'array', // 自动解析JSON字符串为数组
    ];
}

修改后，控制器无需改动，返回的JSON数据中images字段会自动变成数组，前端可以直接用*ngFor遍历。

方案2：前端（Angular）处理 #

如果无法修改后端，在Angular接收数据时手动解析images字段：

export class ProjectsComponent {
  data: any[] = []; // 直接定义为数组类型
  constructor(private http: HttpClient) {
    this.http.get<any[]>('http://localhost:8000/api/portfolio').subscribe(projects => {
      // 遍历项目，解析每个项目的images字段
      this.data = projects.map(project => ({
        ...project,
        images: JSON.parse(project.images)
      }));
    }, error => console.error(error));
  }
}

同时修改模板中的遍历逻辑，直接用*ngFor="let project of data"即可，不需要再取data[0]。

报错原因 #

Cannot find a differ supporting object错误是因为*ngFor指令只能遍历数组或可迭代对象，而当前project.images是JSON字符串，不是数组类型，因此无法被遍历渲染。

内容的提问来源于stack exchange，提问作者Muhammad Shahzaib