Angular pass object array to html ngFor problem

Question

I have angular on the frontend and .net-core on the backend in my project. I simply use http get call for getting members array. I would like the list my members name. my code is like that;

<div *ngFor = "let member of members">
  <span>{{member.name}}</span>
</div>

But it doesn't work. My Http get works with status code 200 when I look at network tab on chrome's inspect screen but nothing show on the page fully blank. I tried to add extra code for detecting my error and editted my code like this;

<div>
  <span>{{members[0].name}}</span>
</div>
<div *ngFor = "let member of members">
  <span>{{member.name}}</span>
</div>

It works... I can show all members name on the page but have an error on console "cannot read property of member[0] of undefined"

Interesting problem, do you have any idea?

Btw, I tried add question mark to my array like <span>{{memeber[0]?.name}}</span> but still have same error. Actually I don't need this below part of the code;

<div>
  <span>{{members[0].name}}</span>
</div>

But I couldn't get members name on the page without this code-part.

I couldn't reach my codes now sorry. But I try to explain what am I did on my member.ts class;

1- I create memberModel and contains name, age, nationality, livingCountry 2- I post httpGet call to my backend and it retrive member infos from postgre db. 3- In member.ts class 3.1- I define empty members array. members : memberModel[]; 3.2- create a method getMembers() which subscribe to my http get method. 3.3- I call getMembers() on ngOnIni method.

Can you add the code how you assign value to members? And what that array contains? — mat.hudak
– mat.hudak, Commented Apr 7, 2021 at 7:02
Just do a console.log(this.members) and show the result please. — MonkeyScript
– MonkeyScript, Commented Apr 7, 2021 at 7:09
@Mikkel Christensen nope I did it now. Code doesn't have any typos on vs code. I editted — devtnc
– devtnc, Commented Apr 7, 2021 at 7:11

user9268072 · Accepted Answer · 2021-04-07 07:16:10Z

3

I guess your issue relies with the fetching of members. You said that you are getting this data from a .Net backend. Maybe your request is coming back later and this is why members is undefined when the component firstly loads. I would suggest you define the members array with a default value in the component.ts file:

public members = [];

Also, to further help, it would be very helpful to put more info, also the typescript file would help 😁.

answered Apr 7, 2021 at 7:16

user9268072

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

1 Comment

devtnc Over a year ago

You're right. But as I said I didn't reach my codes now. Thx for your advice

Rena · Accepted Answer · 2021-04-08 05:19:34Z

Here is a whole working demo you could follow:

import { Component,Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  public members: memberModel[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<memberModel[]>(baseUrl +'weatherforecast/getmember').subscribe(result => {
      this.members = result;
    }, error => console.error(error));
  }
}
interface memberModel {
  name: string;
  age: number;
  nationality: string;
  livingCountry: string;
}

Backend Code:

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    [Route("getmember")]
    public IEnumerable<memberModel> getmember()
    {
        var model = new List<memberModel>()
         {
             new memberModel(){Age=12,Name="aa",Nationality="China",LivingCountry="ShangHai"},
             new memberModel(){Age=25,Name="bb",Nationality="USA",LivingCountry="Washington"},
             new memberModel(){Age=32,Name="cc",Nationality="UK",LivingCountry="London"}
         };
        return model;
    }
}

Collectives™ on Stack Overflow

Angular pass object array to html ngFor problem

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related