[IONIC 3] Google Place Details获取图片异常：HTML仅显示一张

嘿，我来帮你排查这个问题！你的photo函数里藏着一个导致只显示单张图片的小bug，咱们一步步来看：

问题根源 #

函数里的for循环中，第一次迭代就触发了return语句——这会直接终止整个函数的执行，后面的图片完全没机会被处理，自然页面上只能看到第一张图啦。

修正后的代码 #

我们需要把所有图片的HTML标签拼接成一个完整的字符串，等循环结束后再统一返回：

function photo(place) { 
  var photos = place.photos; 
  if (!photos || photos.length === 0) { 
    return '<p>暂无商家图片</p>'; // 没有图片时返回提示内容，提升用户体验
  } 
  let imgHtml = ''; // 初始化空字符串，用来存储所有图片标签
  for (let i = 0; i < photos.length; i++) { 
    // 把每个图片标签拼接到字符串中
    imgHtml += '<img src="'+ photos[i].getUrl({ 'maxWidth': 2000, 'maxHeight': 1000 }) +'" alt="商家图片"/>'; 
  } 
  return imgHtml; // 循环结束后返回所有图片的HTML内容
}

更贴合Ionic/Angular的优化建议 #

在Ionic（基于Angular）项目中，更推荐用框架的模板语法来处理渲染，这样更安全也更易维护：

1. 在组件类中保存商家图片数组：

// 组件类代码
public placePhotos: any[] = [];

// 获取Place Details后保存图片数组
fetchPlaceDetails() {
  // 假设此处已成功获取到place对象
  this.placePhotos = place.photos || [];
}

2. 在HTML模板中用*ngFor遍历渲染：

<ion-img 
  *ngFor="let photo of placePhotos" 
  [src]="photo.getUrl({ maxWidth: 2000, maxHeight: 1000 })" 
  alt="商家图片"
></ion-img>

内容的提问来源于stack exchange，提问作者João Mello