Angular 将 object 数组传递给 html ngFor 问题

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.

Answer 1

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.

Answer 2

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