嗨，我有一個帶有 spring boot、sql、angular 的專案。我與一對多有關系，我不知道如何在組件 html 中顯示第二個物件。我的組件：
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
public project: Project[]=[];
public editProject!:Project;
public deleteProject!:Project;
public teams!:Teams[];
title:any;
constructor(private projectService: ProjectService, private _rotue:Router) { }
ngOnInit(): void {
this.getProject();
}
public getProject(): void {
this.projectService.getProject().subscribe(
(response) => {
this.project = response;
console.log(this.project);
},
(error: HttpErrorResponse) => {
alert(error.message);
}
);
我的HTML：
<div *ngFor="let projects of project" class="cards">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-1">
</div>
<div class=" card-title align-self-center mb-0">
<h5>Name of Project: {{projects?.name}}</h5>
<p class="m-0">Name of team: {{projects?.teams.name}}</p>
</div>
我的 Json 得到：
{
"id":"34,
"name":"Projekt",
"priority":"wysoki",
"teams":[{
"id":2,
"name":"DruzynaA",
"leader":"Wojtek"
}]}
并且“團隊”不顯示，如果我將其更改為 project.teams 是顯示 [object Object] 我也嘗試使用 | 異步但沒有幫助。
我正在尋求幫助，我將不勝感激
uj5u.com熱心網友回復：
看起來 Teams 是一個陣列，因此您需要指定一個索引。
<p class="m-0">Name of team: {{projects?.teams[index].name}}</p>
另外，一些筆記。您正在將 ngfor 用于看起來像一個物件的專案。你可能打算為團隊做這件事？
uj5u.com熱心網友回復：
嘗試這個
零件：
public projects: Project[]=[];
html:
<div *ngFor="let project of projects" class="cards">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-1">
</div>
<div class=" card-title align-self-center mb-0">
<h5>Name of Project: {{project?.name}}</h5>
<ng-container *ngFor="let team of project.teams">
<p class="m-0">Name of team: {{ team.name }}</p>
</ng-container>
</div>
uj5u.com熱心網友回復：
ngFor 用于可迭代物件，例如陣列。在您的物件中，“團隊”是可以使用 ngFor 的陣列。嘗試這個。
<div class="cards">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-1"></div>
<div class="card-title align-self-center mb-0">
<h5>Name of Project: {{ project?.name }}</h5>
<p class="m-0" *ngFor="let team of project.teams">
Name of team: {{ team.name }}
</p>
</div>
</div>
</div>
</div>
注意：但是，如果您要顯示多個團隊，請使用團隊索引。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492204.html