Angular 17中如何在模板中访问信号数组元素？

问题出在你组件中定义的计算信号上：你直接返回了Service中的信号对象，而非信号的实际值。

错误原因分析 #

Service中的answerSequence是一个Signal<string[]>类型的信号，当你在组件的computed中写：

answerSequence = computed(() => this.questionService.answerSequence);

此时computed返回的是信号对象本身，而不是信号存储的数组值。模板中调用answerSequence()得到的是信号对象，自然无法通过[0]访问数组元素。

修复方案 #

修改组件中的计算信号，让它返回信号的值（调用信号的()方法）：

answerSequence = computed(() => this.questionService.answerSequence());

模板使用 #

现在computed返回的是string[]类型，模板中即可正常访问数组元素：

<!-- 可选链式调用，适配数组可能为空的场景 -->
<p>{{ answerSequence()?.[0] }}</p>
<!-- 直接访问，适用于确定数组始终有4个元素的场景 -->
<p>{{ answerSequence()[0] }}</p>

简化写法（可选） #

如果不需要额外的计算逻辑，只是要把Service的信号暴露给模板，可直接用getter替代computed，更简洁：

get answerSequence() {
  return this.questionService.answerSequence;
}

模板中同样使用{{ answerSequence()?.[0] }}即可访问元素。

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