Angular中解析JSON对象并根据图片非空条件渲染组件的方法

你的*ngIf判断失效，核心原因是JSON结构的路径错误：users数组的每个元素里，user是数组类型（用方括号包裹），而非直接的对象，所以直接调用user.image无法定位到目标字段。

修正方案 #

1. 先修正JSON语法错误 #

原JSON存在语法缺失（对象分隔逗号、数组内对象未用大括号包裹），修正后如下：

users = [
  {
    user: [
      {
        image: 'user1.png',
        data: {
          name: 'abc'     
        }
      }
    ]
  },
  {
    user: [
      {
        image: null,
        data: {
          name: 'xyz'     
        }
      }
    ]
  },
  {
    user: [
      {
        image: 'user1.png',
        data: {
          name: 'xyzz'     
        }
      }
    ]
  }
];

2. 调整HTML模板的判断逻辑 #

场景1：每个user数组仅含一个元素

直接定位数组第一个元素的image字段做判断：

<div *ngFor="let item of users">
  <user-image 
    *ngIf="item.user[0].image !== null" 
    [user]="item.user[0]"
  ></user-image>
</div>

场景2：每个user数组可能含多个元素

嵌套*ngFor循环每个子元素，再做判断：

<div *ngFor="let item of users">
  <div *ngFor="let user of item.user">
    <user-image 
      *ngIf="user.image !== null" 
      [user]="user"
    ></user-image>
  </div>
</div>

3. 可选：在组件类中提前过滤数据 #

如果模板逻辑不想太复杂，可以在TypeScript里先过滤出符合条件的用户，再渲染：

// 组件类中添加过滤逻辑
filteredValidUsers = this.users.flatMap(item => 
  item.user.filter(user => user.image !== null)
);

模板直接循环过滤后的数组：

<div *ngFor="let user of filteredValidUsers">
  <user-image [user]="user"></user-image>
</div>

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