CODEWITHSUNDEEP
angular
user12465572
user12465572

Reputation:

Angular how to display data from user which contain an array

I'm working on RecipesApp (Asp.Net MVC + Angular as a View)

I have User which contain ICollection of Recipes

What i'm trying to do is:

Display all recipes from User.

Smth like that *ngFor let user of user.recipes

{{user.recipes}}

What i've already tried My user class:

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[];
}

MyComponent

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

<div class="container">
    {{user.username}}
    <br>
    <hr>
    <p class="text-center">User Recipes: </p>

    <!-- <div *ngFor="let user of user" class="col-lg-3 col-md-3 col-sm-6">
      </div> -->
    </div>

@EDIT

My resolver:

import {Injectable} from '@angular/core';
import { User } from '../_models/user';
import { Resolve, Router, ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from '../_services/user.service';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AlertifyService } from '../_services/alertify.service';


@Injectable()
export class MemberDetailResolver implements Resolve<User> {

    constructor(private userService: UserService, private router: Router, private alertify: AlertifyService) {

    }

    resolve(route: ActivatedRouteSnapshot): Observable<User> {
        return this.userService.getUser(route.params.id).pipe(
            catchError(error => {
                this.alertify.error('Problem retrieving data');
                this.router.navigate(['/members']);
                return of(null);
            })
        );

    }
}

Recipe class

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

Upvotes: 0

Views: 85

Answers (1)

Doflamingo19
Doflamingo19

Reputation: 1629

try this in you .html:

in your ts you need to do this:

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

and in your html (I suppose recipes class has a property name)

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

Upvotes: 1

Related Questions