时间戳

首页 > 解决方案 > Angular 将对象数组传递给 html ngFor 问题

angular - Angular 将对象数组传递给 html ngFor 问题

问题描述

在我的项目中，我的前端有 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()。

标签： angularasp.net-core

解决方案

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

public members = [];

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

推荐阅读