Angular 6中Resolver获取数据时Recipe的Photo数组为null的问题

兄弟，我来帮你捋捋这个问题：核心原因应该是你通过UserService.getUser()获取用户数据时，没有同时加载Recipe关联的Photo数组，而其他页面要么单独请求了Recipe的Photo，要么在获取Recipe时做了关联查询，所以能正常显示。

下面给你几个可行的解决思路，按优先级来：

1. 优化后端查询，一次性加载关联数据 #

这是最高效的方案，直接在后端查询用户数据时，把关联的Recipe和Recipe下的Photo一起加载出来。比如你用ORM框架（比如Entity Framework）的话，要做嵌套的关联查询：

// 后端示例代码（假设是.NET EF）
public async Task<User> GetUser(int userId)
{
    return await _context.Users
        .Include(u => u.Recipes) // 加载用户的Recipe数组
            .ThenInclude(r => r.Photos) // 再加载每个Recipe的Photo数组
        .FirstOrDefaultAsync(u => u.Id == userId);
}

这样前端拿到的User对象里，每个Recipe的Photos就不会是null了，你的组件代码不需要大改，直接用this.user.recipes就能拿到带Photo的数据。

2. 前端调整：确认模型定义与接口返回 #

先检查前端的User和Recipe接口模型，确保Recipe里有photos属性：

export interface Photo {
  // 你的Photo属性定义
}

export interface Recipe {
  id: number;
  // 其他Recipe属性
  photos: Photo[]; // 确保这个属性存在
}

export interface User {
  id: number;
  // 其他User属性
  recipes: Recipe[];
}

然后确认后端接口返回的JSON数据里，每个Recipe对象确实包含photos字段，如果后端没返回，那前端肯定拿不到。

3. 关于“给每个Recipe加第二个Resolver”的可行性 #

这个方案是可行的，但不推荐，因为会产生大量重复请求（每个Recipe都发一次请求拿Photo），性能不好。如果实在要这么做，你可以在组件的ngOnInit里拿到用户数据后，遍历recipes，调用RecipeService获取每个Recipe的Photo：

ngOnInit() {
  this.route.data.subscribe(data => {
    this.user = data['user'];
    // 遍历每个Recipe，获取Photo
    this.user.recipes.forEach(recipe => {
      this.recipeService.getRecipeWithPhotos(recipe.id).subscribe(recipeWithPhotos => {
        recipe.photos = recipeWithPhotos.photos;
      });
    });
  });
}

但还是建议优先用第一种方案，一次性加载所有关联数据，体验更好。

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