[FIXED] NgFor doesn't display data

Issue

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

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

Solution

Try this

Component:

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>

Answered By - Mario Linares
Answer Checked By - Terry (JavaFixing Volunteer)