Angular中如何用服务端返回数组首项初始化selectedExperience变量

HttpClient发起的请求是异步执行的，组件类初始化阶段experiences还是空数组，此时执行selectedExperience: Experience = this.experiences[0]实际取到的是undefined；后续接口返回数据给experiences赋值时，没有同步更新selectedExperience，自然无法实现默认选中首项的效果。

在接口订阅的回调函数中，拿到返回的列表数据后，再给selectedExperience赋值首项即可，修改后的getExperiences方法如下：

getExperiences() {
  this.experienceService
    .getExperiences()
    .subscribe((experiences) => {
      this.experiences = experiences;
      // 增加长度判断，避免接口返回空数组时报错
      if (experiences.length) {
        this.selectedExperience = experiences[0];
      }
    });
}

对应类属性的初始赋值可以调整为可选类型，移除无效的初始化逻辑：

// 原写法 selectedExperience: Experience = this.experiences[0]; 替换为
selectedExperience?: Experience;

模板中渲染selectedExperience属性时，建议使用安全导航运算符?，避免数据加载完成前模板访问空属性报错，示例：

<div class="experience-detail">
  <h3>{{ selectedExperience?.name }}</h3>
  <p>{{ selectedExperience?.description }}</p>
</div>

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