Angular TS2551报错：类型PostListComponent上不存在属性post如何解决

错误原因 #

TS2551报错的核心原因是：post-list-component.html中使用的post变量未在当前作用域定义，你的组件类中只声明了数组类型的posts属性，没有单个post属性，所以编译器识别不到该变量。你传入posts时报TS2345是因为posts是Post[]数组类型，和onDeletePost要求的单个Post参数类型不匹配。

修复步骤 #

1. 修正模板的列表遍历逻辑 #

你需要先用Angular的*ngFor指令遍历posts数组，为每个元素声明临时变量post，再把该变量传入删除方法即可。修改后的post-list-component.html代码如下：

<ul>
  <!-- 遍历posts数组，给每个项声明临时变量post -->
  <li class="list-group-item" *ngFor="let post of posts">
    <!-- 此处可补充post的标题、内容等展示逻辑 -->
    <button class="btn btn-warning" (click)="onDeletePost(post)"> Supprimer </button>
  </li>
</ul>

2. 可选优化：规范Service中删除方法的逻辑 #

你当前posts.service.ts里的removePost方法的查找逻辑写法不规范，可简化为直接返回对比结果，修正后代码如下：

removePost(post : Post) {
  const postIndexToRemove = this.posts.findIndex(postEl => postEl === post);
  this.posts.splice(postIndexToRemove, 1);
  this.emitPosts();
}

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