NgFor doesn't display data

Question

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

natDaGreat · Accepted Answer · 2022-06-16 15:42:18Z

1

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

<p class="m-0">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?

answered Jun 16, 2022 at 15:42

natDaGreat

761 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikneysh Raj G G A · Accepted Answer · 2022-06-16 16:18:21Z

ngFor is used for iterables such as arrays. In your Object, 'teams' is the array where ngFor could be made use of. Try this.

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

Note: However, if there is a number of teams that you want to display, go with an index for teams.

Mario Linares · Accepted Answer · 2022-06-16 15:50:26Z

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>

Collectives™ on Stack Overflow

NgFor doesn't display data

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related