java - How to load an entity from a service in Angular 2 in an *ngFor -

so let's example want list set of students in angular2 pulling data java backend service, , fields are:

• id
• name
• age
• field
• universityid

now when display on webpage, not wish display universityid university name. should mention there university entity:

• id
• name
• city

how can display name of university instead of id in webpage, without creating new field in student entity? know how 1 student, how can on *ngfor loop?

thank help, hope question clear.

for example:

//student.component.ts import { component, oninit } '@angular/core'; import { studentservice } 'my/studentservice/path'; import {student} 'my/studentmodel/path'; import { universityservice } 'my/universityservice/path';  import { university } 'my/univeristymodel/path'; @component({ selector: 'student', templateurl: './student.component.html' }) export class studentcomponent implements oninit { students = student []; university: university;  constructor( private studentservice : studentservice; private universityservice : universityservice; ){}  loadall(){ this.studentservice.query(myparameters).subscribe(students => this.students = students;  }  ngoninit(){ this.loadall(); }  } 

and in html

//student.component.html  <table> <tr *ngfor="let student of students">                 <td><a [routerlink]="['../student', student.id ]">{{student.id}}</a></td>                 <td>{{student.name}}</td>                 <td>{{student.age}}</td>                 <td>{{student.field}}</td>                 <td>{{student.universityid}}</td> </tr> </table> 

i have universityservice, , can retrieve university universityid. how do can display university name , not id in html?

i tried solution, never ending loop in method:

//student.component.ts  public loaduniversityname(id){         this.universityservice.find(id).subscribe(university => {             this.university = university;             return this.university.name;         });     } 

and inserted in html:

//student.component.html  <td>{{loaduniversityname(student.univeristyid)}}</td> 

if getting list of students server, need have entire object universityentity inside studentobject instead of universityid. in case of ngfor, should have code this:

<table> <tr *ngfor="let student of students">    <td><a [routerlink]="['../student', student.id ]"> {{student.universityentity.id}}</a></td>    <td>{{student.name}}</td>    <td>{{student.age}}</td>    <td>{{student.field}}</td>    <td>{{student.universityentity.name}}</td> </tr> </table> 

so object should this:

students: any[] = [{     id: 1,     name: 'mark',     age: 22,     field: 'science',     universityentity: {        id: 1,        name: 'cambridge',        city: 'cambridge'     } }]