如何在Angular模板中优雅访问可能不存在的数组索引？

我定义了一个对象数组：

public arr: {val: string}[] = [];

想要访问数组的第一个对象，但数组可能为空，遇到了以下问题：

直接访问的隐患 #

编译器不会报错，但数组为空时运行时会抛出错误：

<app-comp [value]="arr[0].val"></app-comp>
<div>{{ arr[0].val }}</div>

可选链的警告问题 #

使用?.运算符能避免运行时错误，但会触发NG8107警告：

<app-comp [value]="arr[0]?.val"></app-comp>
<div>{{ arr[0]?.val }}</div>

Warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator

当前可行但冗余的写法 #

用&&做非空判断可以解决问题，但模板代码重复冗余：

<app-comp [value]="arr[0] && arr[0].val"></app-comp>
<div>{{ arr[0] && arr[0].val }}</div>

是否存在更优雅的解决方案？

注：*ngIf仅适用于可以省略<app-comp>或<div>这类元素的场景，并非所有情况都适用。

推荐的优雅解决方案 #

1. 修正数组类型定义

TypeScript默认认为{val: string}[]的元素都是非空的，但数组为空时arr[0]实际是undefined。修改类型让元素允许为undefined：

public arr: ({val: string} | undefined)[] = [];

此时使用?.运算符就不会触发警告，TypeScript能识别arr[0]可能为undefined。

2. 组件内封装getter逻辑

在组件类中添加getter方法，封装获取首个元素的判断逻辑：

get firstItem(): {val: string} | undefined {
  return this.arr.length > 0 ? this.arr[0] : undefined;
}

模板中直接调用getter，代码更简洁：

<app-comp [value]="firstItem?.val"></app-comp>
<div>{{ firstItem?.val }}</div>

这种方式把逻辑集中在组件内，便于后续维护，模板也更清爽。

3. 结合空值合并运算符设置默认值（可选）

如果需要为空场景设置默认值，可以搭配??使用：

<app-comp [value]="firstItem?.val ?? ''"></app-comp>
<div>{{ firstItem?.val ?? '暂无数据' }}</div>

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