Angular中如何根据指定ID获取对应数据？解决属性不存在于blogs[]类型报错

问题原因 #

你遇到的报错核心是变量类型定义与实际赋值不匹配：

• 你在组件中把Blog变量声明为blogs[]（即blogs接口的数组类型）
• 但根据ID查询单篇博客的接口getOneBlog返回的是单个blogs接口对象，数组本身不存在title、body、author这些属性，因此TypeScript类型检查直接抛出报错。

解决步骤 #

1. 修正组件变量类型 #

修改blog-details.components.ts中的Blog变量声明：

// 把原代码的Blog: blogs[] 改成以下内容
// 加?表示可选类型，适配初始未加载数据的状态
Blog?: blogs

如果你不想用可选类型，也可以给变量赋初始空值：

Blog: blogs = {} as blogs

小规范建议：接口名建议首字母大写，你可以把blogs接口重命名为Blog，更符合TypeScript类型命名规范。

2. 优化模板避免空值报错 #

数据还未从接口返回时，Blog变量是空值，直接访问属性会抛出运行时错误，有两种优化方案可选：

方案1：用*ngIf控制渲染（推荐）

给模板外层加*ngIf判断，只有Blog有值时才渲染内容：

<div class="blog-details" *ngIf="Blog">
  <article>
      <h2>{{Blog.title}}</h2>
      <p>{{Blog.author}}</p>
      <div class="body">
          {{Blog.body}}
      </div>
      <button class="delete-blog">
          Delete Blog
      </button>
  </article>
</div>

方案2：用可选链操作符访问属性

不需要修改模板结构，直接给属性访问加?.即可：

<h2>{{Blog?.title}}</h2>
<p>{{Blog?.author}}</p>
<div class="body">
    {{Blog?.body}}
</div>

3. 校验服务方法返回类型 #

建议额外检查BlogService中getOneBlog方法的返回值类型，确保定义为Observable<blogs>而非Observable<blogs[]>，避免后续出现类型不匹配问题。

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