CODEWITHSUNDEEP
angularasp.net-core
devtnc
devtnc

Reputation: 33

Angular pass object array to html ngFor problem

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.

Upvotes: 0

Views: 401

Answers (2)

Rena
Rena

Reputation: 36655

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

Upvotes: 1

user9268072
user9268072

Reputation:

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

Upvotes: 3

Related Questions