Angular 如何显示来自用户的包含数组的数据

我正在使用RecipesApp Asp.NETMVC+Angular作为视图

我有一个用户，其中包含我收集的食谱

我想做的是：

显示用户提供的所有配方

Smth类似于*nglet user.recipes的用户

{{user.recipes}}

我已经试过了 我的用户类：

export interface User {
    id: number;
    username: string;
    knownAs: string;
    age: number;
    gender: string;
    created: Date;
    lastActive: Date;
    photoUrl: string;
    city: string;
    country: string;
    introduction?: string;
    userPhotos?: UserPhoto[];
    recipes?: Recipe[];
}

真菌成分

export class MemberDetailComponent implements OnInit {
  user: User;
  recipes: Recipe[];

  constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user.recipes = data.user;
    });
  }

html

在你身上试试这个。html：

在ts中，您需要执行以下操作：

ngOnInit() {
    this.route.data.subscribe(data => {
      this.user= data.user; //here change
    });
  }

在html中，我假设recipes类有一个属性名

     <div  *ngFor="let recipe of user.recipes" >
      <p>{{recipe.name}}</p>
     </div>

---

*ngFor=let recipe of user.recipes在视图中我得到了存储在数据中的内容。user？我编辑了帖子并包含了数据中的内容。userConsole您的user.data，并告诉里面的内容无需解析代码我编辑了我的答案。我显示用户名，但您可以使用{{recipe.id}更改为显示id！它有效吗？在控制台上，我无法读取Undefinedy的属性“recipes”，您正在更改您的问题！你有点糊涂了！您还需要发布recipe类，因为您使用recipes，但您只使用用户类而不使用recipes抱歉，我认为这足以解决我的问题：/@BartolV9您确定您的解决方案正确吗？对我来说这不是工作

export interface Recipe {
    id: number;
    name: string;
    ingredients: string;
    preparationTime: number;
    dateAdded: Date;
    photoUrl: string;
    description?: string;
    recipePhotos?: RecipePhoto[];
}

ngOnInit() {
    this.route.data.subscribe(data => {
      this.user= data.user; //here change
    });
  }

     <div  *ngFor="let recipe of user.recipes" >
      <p>{{recipe.name}}</p>
     </div>