java - 如何从 *ngFor 中的服务加载实体

Question

举例来说，我想列出 Angular2 中的一组学生，我正在使用服务从 java 后端提取数据，字段为:

• ID
• 姓名
• 年龄
• 字段
• 大学ID

现在，当我在网页上显示此内容时，我不希望显示 UniversityId，而是显示大学名称。我应该提到有一个大学实体:

• ID
• 姓名
• 城市

如何在网页中显示大学名称而不是 ID，而不在学生实体中创建新字段？我知道如何对一名学生执行此操作，但如何在 *ngFor 循环上执行此操作？

非常感谢您的帮助，希望我的问题很清楚。

例如:

//student.component.ts
import { Component, OnInit } from '@angular/core';
import { StudentService } from 'my/studentService/path';
import {Student} from 'my/studentModel/path';
import { UniversityService } from 'my/universityService/path';
 import { University } from '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();
}

}

在我的 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>

我确实有一个大学服务，我可以通过 UniversityId 检索大学。我该如何执行此操作才能在 HTML 中显示大学名称而不是其 ID？

我尝试了这个解决方案，但我的 GET 方法中出现了永无休止的循环:

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

我将其插入到 HTML 中:

//student.component.html

<td>{{loadUniversityName(student.univeristyId)}}</td>

Answer 1

如果您要从服务器获取学生列表，则需要在 StudentObject 中包含整个对象 UniversityEntity，而不是 UniversityId。 对于 ngFor，您应该具有如下代码:

<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>

所以你的对象应该是这样的:

students: any[] = [{
    id: 1,
    name: 'Mark',
    age: 22,
    field: 'Science',
    universityEntity: {
       id: 1,
       name: 'Cambridge',
       city: 'Cambridge'
    }
}]