Angular 将对象数组传递给 html ngFor 问题答案

【问题标题】：Angular pass object array to html ngFor problemAngular 将对象数组传递给 html ngFor 问题
【发布时间】：2021-04-07 06:59:44
【问题描述】：

在我的项目中，前端有 angular，后端有 .net-core。我只是使用 http get 调用来获取成员数组。我想要我的成员姓名列表。我的代码是这样的；

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

但它不起作用。当我查看 chrome 的检查屏幕上的网络选项卡时，我的 Http get 使用状态代码 200，但页面上没有任何显示完全空白。我尝试添加额外的代码来检测我的错误并像这样编辑我的代码；

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

它有效...我可以在页面上显示所有成员名称，但在控制台上出现错误“无法读取未定义成员 [0] 的属性”

有趣的问题，你有什么想法吗？

顺便说一句，我尝试将问号添加到我的数组中，例如<span>{{memeber[0]?.name}}</span>，但仍然有同样的错误。其实我在下面的部分代码不需要这个；

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

但如果没有此代码部分，我无法在页面上获取成员名称。

抱歉，我现在无法访问我的代码。但我试图解释我在 member.ts 课程上做了什么；

1- 我创建 memberModel 并包含姓名、年龄、国籍、livingCountry 2-我将 httpGet 调用发布到我的后端，它从 postgre db 中检索成员信息。 3- 在 member.ts 类中 3.1-我定义了空成员数组。成员：成员模型[]； 3.2-创建一个订阅我的http get方法的getMembers()方法。 3.3- 我在 ngOnIni 方法上调用 getMembers()。

【问题讨论】：

您可以添加代码如何为成员分配价值吗？该数组包含什么？
我在问题帖中添加了关于 .ts 类的信息
请做一个 console.log(this.members) 并显示结果。
您好像有错字memebers
@Mikkel Christensen 不，我现在做到了。代码在 vs 代码上没有任何拼写错误。我编辑了

标签： angular asp.net-core

【解决方案1】：

我猜您的问题取决于获取成员。您说您从 .Net 后端获取这些数据。也许您的请求稍后会回来，这就是组件首次加载时未定义成员的原因。我建议您在 component.ts 文件中使用默认值定义成员数组：

public members = [];

此外，为了进一步帮助，提供更多信息会非常有帮助，打字稿文件也会有所帮助?。

【讨论】：

你是对的。但正如我所说，我现在没有达到我的代码。谢谢你的建议

【解决方案2】：

这是一个完整的工作演示，您可以关注：

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

后端代码：

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

【讨论】：