NgFor doesn't display data-CodePudding

Hi i have the project with spring boot, sql, angular. I have relations with one to many and I dont know how to display the second object in component html. My Componnent:

@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);
      }
    );

My Html:

<div *ngFor="let projects of project" >
       <div >
          <div >
             <div >
                
             </div>
             <div >
                <h5>Name of Project: {{projects?.name}}</h5>
                <p >Name of team: {{projects?.teams.name}}</p>
             </div>

My Json get:


 {       
        "id":"34,
        "name":"Projekt",
        "priority":"wysoki",
        "teams":[{
                "id":2,
                "name":"DruzynaA",
                "leader":"Wojtek"
            }]}

And the "teams" does not display, if i change that to project.teams is display [object Object] also i try with | async but it not helped.

I am asking for help, I will be grateful

CodePudding user response：

It looks like Teams is an array so you need to specify an index.

<p >Name of team: {{projects?.teams[index].name}}</p>

Also, some notes. you are using ngfor for project which looks like an object. you probably meant to do it for Teams?

CodePudding user response：

Try this

Component:

public projects: Project[]=[];

Html:

<div *ngFor="let project of projects" >
       <div >
          <div >
             <div >
                
             </div>
             <div >
                <h5>Name of Project: {{project?.name}}</h5>
                <ng-container *ngFor="let team of project.teams">
                   <p >Name of team: {{ team.name }}</p>
                </ng-container>

                
             </div>