PostgreSQL返回带引号数组致Angular *ngFor失效问题求助

你遇到的核心问题是：数据库返回的images和info字段是被引号包裹的JSON字符串，而非真正的JSON数组，导致Angular无法用*ngFor遍历，也无法直接访问数组元素。下面分几个层面给你解决方案，从最稳妥的服务端处理到前端临时修复，再到数据库层面的根治：

一、服务端（PHP）处理（推荐） #

最靠谱的方式是在PHP把数据返回给前端之前，将这些字符串格式的JSON解析成真正的数组/对象。你可以在fetchAll()之后遍历结果集，对images和info字段做JSON解析：

$gifts = $query -> fetchAll();
// 遍历每个数据项，解析JSON字符串字段
foreach ($gifts as &$gift) {
    // 解析images字段
    if (!empty($gift['images'])) {
        $gift['images'] = json_decode($gift['images'], true);
    }
    // 同理处理info字段
    if (!empty($gift['info'])) {
        $gift['info'] = json_decode($gift['info'], true);
    }
}
unset($gift); // 释放引用

这样处理后，返回给前端的images就是标准的数组，Angular就能直接用*ngFor或者访问data.images[0].image了。

二、前端（Angular）处理（临时修复） #

如果暂时没法修改服务端代码，可以在Angular收到数据后，手动解析JSON字符串：

this.$local.gift_start(this.user_token, this.user_id, this.user_lat, this.user_lng, this.type)
  .then((jordi: any) => {
    if (jordi.success) {
      // 遍历payload里的每个数据，解析images字段
      this.Dsmart = jordi.payload[0].map(item => {
        return {
          ...item,
          // 解析成数组，空值时返回空数组避免报错
          images: item.images ? JSON.parse(item.images) : []
        };
      });
    }
  })

另外注意你前端模板的错误：*ngFor="let data of Dsmart"已经把data定义为每个数组项了，所以模板里应该用data.images而不是data[i].images，修正后的模板建议加上可选链避免空报错：

<div class="card current_progress" *ngFor="let data of Dsmart; let i = index">
  <a [href]="data.images[0]?.image">
    <img class="img-fluid img-raised" [src]="data.images[0]?.image" alt="">
  </a>
</div>

三、数据库层面根治 #

如果你的数据库里images和info字段存的是字符串类型（比如text/varchar），最好直接修改字段类型为jsonb（PostgreSQL推荐的JSON类型，支持索引和操作）：

ALTER TABLE tribe.smart_address ALTER COLUMN images TYPE jsonb USING images::jsonb;
ALTER TABLE tribe.smart_address ALTER COLUMN info TYPE jsonb USING info::jsonb;

如果不想修改字段类型，也可以在查询的时候直接把字段转成JSON类型：

SELECT 
  *, 
  earth_distance(ll_to_earth($user_lat,$user_lng), ll_to_earth(lat, lng)) as local_distance,
  images::json as images, -- 把字符串转成JSON
  info::json as info       -- 同理处理info
FROM tribe.smart_address 
WHERE earth_box(ll_to_earth($user_lat,$user_lng), $fence) @> ll_to_earth(lat, lng) 
AND active=:one 
ORDER by date_created DESC

这样PHP fetch到的就是JSON对象，而非字符串，从根源解决问题。

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