Angular中如何正确展示过滤后数组内的对象属性？

问题原因 #

你定义的currentSuper是数组类型，filter方法返回的也是数组（哪怕只有一个匹配项），但你在模板里直接尝试访问数组的firstName/lastName属性——数组本身并没有这些属性，自然无法获取到值；直接用currentSuper[0].firstName又会因为数组未初始化或为空时触发空指针错误。

方案一：模板中正确访问数组元素并添加空值保护 #

在模板里先通过索引[0]获取数组的第一个元素，同时保留可选链操作符?.处理数组为空或未定义的情况：

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

方案二：修改TS逻辑，直接获取单个对象（更推荐） #

既然你要的是匹配id的单个管理员，用find方法替代filter更合适——find返回第一个匹配的对象，没有匹配项则返回undefined，同时把currentSuper的类型改成可选对象（而非数组）：

// 定义为可选的单个对象类型（建议不要用any，明确类型更规范）
currentSuper?: { id: string; firstName: string; lastName: string };

// 使用find替代filter，直接获取匹配的单个项
this.currentSuper = response.builder?.superintendents?.find((x) => x.id === this.builderSuperintendentId);

此时模板可以直接按你最初的写法渲染：

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

内容的提问来源于stack exchange，提问作者Jamie Garcia