How to display a multiple object in the view

I have this json that contains another one inside

import { AnimalClass } from ‘./animal’;
export class UserClass {

email: string;
displayName: string;
animal: AnimalClass[];
constructor(email: string , displayName: string){
    this.email = email
    this.displayName = displayName
}

export class AnimalClass {
animalName: string;
description: string;
location: string;
constructor(animalName: string, description: string, location: string){

    this.animalName = animalName
    this.description = description
    this.location = location
}

I get this information by http
And I keep it in a user: Array = ;

private LoadProfile() {
this.ProfileService
.getProfile()
.subscribe(
// the first argument is a function which runs on success
(data: UserClass) => {
this.user = data
console.log("USEERRR: " + JSON.stringify(this.user));
},
// the second argument is a function which runs on error
err => console.error(err),
// the third argument is a function which runs on completion
() => console.log(‘done loading data’)
);
}

<ion-input type=“text” [(ngModel)]=“user.animalName” name=“animalName”>

But I can only display the data that the user is using.
The json anima is not shown by the view.