返回数组以在 html ANGULAR 中显示

Question

我不确定这在 Angular 中是如何完成的。 我有这个映射项目

currentSuper?: any[];


this.currentSuper = response.builder?.superintendents?.filter((x) => x.id === 
this.builderSuperintendentId);

response.builder.superindentents 返回

 [0:{id:'', firstName: '', lastName:''}, 
  1:{ id: '', firstName:'', lastName:''}] 

索引号正在抛出这个问题，因为 currentSuper 看起来像这样：

 [0:{id:'', firstName: '', lastName:''}]


<span class="text-secondary">Superintendent:</span><span class="mx-2">{{ 
order.value.currentSuper?.firstName }} {{ order.value.currentSuper?.lastName }}</span>

firstName 现在为空。我也无法执行 order.value.current[0].firstName 。那么我如何让这些数据真正正确渲染？

Answer 1

因为它返回一个数组，所以您需要从列表中“抓取”一个项目，或者渲染所有过滤后的项目。

看一下以下使用

itemList

作为项目数组的示例。

使用索引抓取物品（不推荐）：

<div>
  {{itemList[0].id}}
</div>

使用

ngFor

渲染所有项目：

<div *ngFor="let item of itemList">
  {{item.id}}
</div>

另一种选择是使用

find

而不是

filter

，以便它返回一个对象而不是过滤后的数组。 对我来说，这似乎就是您正在寻找的

this.currentSuper = response.builder?.superintendents?.find((x) => x.id === 
this.builderSuperintendentId);

在 html 中你可以只渲染

currentSuper

:

<div>{{ currentSuper?.id }}</div>