Ionic 3中能否隐藏加载失败图片所在的div容器？

我来帮你搞定这个问题！你现在遇到的情况是，原生onerror只能把图片本身隐藏，但外层的div还占着位置——这是因为原生事件没法直接方便地操作父元素，而且直接操作DOM也不符合Angular的开发思路。咱们换个数据驱动的方式来解决：

步骤1：给列表项添加加载状态 #

在你的组件TS文件里，给每个列表项加一个状态属性，用来标记图片是否加载成功。比如在初始化列表的时候：

// 假设你的列表数据是list
list: any[] = [/* 你的原有数据 */];

ngOnInit() {
  // 给每个item添加isImageLoaded属性，默认设为true（先显示，加载失败再隐藏）
  this.list.forEach(item => {
    item.isImageLoaded = true;
  });
}

// 图片加载失败时的处理方法
onImageError(item: any) {
  // 把状态设为false，后续用来隐藏div
  item.isImageLoaded = false;
}

// 可选：图片加载成功时恢复状态（防止之前加载失败的状态影响）
onImageLoad(item: any) {
  item.isImageLoaded = true;
}

步骤2：用状态控制父级div的显示 #

修改你的模板代码，给图片所在的外层div加上*ngIf指令，通过刚才添加的isImageLoaded状态来控制它的显示——这样当图片加载失败时，整个div会直接从DOM中移除，不会再占据位置：

<div *ngFor="let item of list;">
  <!-- 通过*ngIf控制这个div的显示，加载失败时自动隐藏 -->
  <div *ngIf="item.isImageLoaded" style="width: calc(100%/2); float:left; position:relative; padding-bottom: calc(100%/2);">
    <img 
      style="object-fit:cover; width: 100%; height: 100%; padding: 1px; position: absolute;" 
      [src]="item.img" 
      alt="Norway" 
      (error)="onImageError(item)"
      (load)="onImageLoad(item)"
      (click)="viewImage(item)"
    />
    <!-- 这里的其他内容也会跟着div一起被隐藏哦 -->
  </div>
</div>

为什么不推荐直接操作DOM？ #

可能你会想到用$event.target.parentElement.style.display = 'none'这种方式直接隐藏父div，虽然临时能用，但不符合Angular数据驱动的理念，后续如果组件有变更检测或者数据更新，可能会出现意想不到的问题，所以还是用状态绑定的方式更稳妥。

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