Angular 找不到模块'；异步挂钩'；在角度应用中

正在尝试删除我的angular应用程序的post组件中来自jsonplaceholder/post网站的帖子。在使用服务从Json占位符调用delete HTTP时，我遇到以下错误

src/app/components/post/post.component.ts（5,27）中出现错误：错误TS2307:找不到模块“async_hooks”。 src/app/components/post/post.component.ts（55,35）：错误TS2345:类型为“Number”的参数不能分配给类型为“Number | post”的参数。 类型“Number”不可分配给类型“Post”。 类型“Number”中缺少属性“id”

这是发生删除操作的组件中的remove post方法：

removePost(post: Post) {
if (confirm('Are you Sure?')) {
  this.postService.removePost(post.id).subscribe(() => { //calling the service using the dependency injection and subscribing it to the function in the service
    this.posts.forEach((cur, index) => {
      if (post.id === cur.id ) {
        this.posts.splice(index, 1);
      }
    });
  });
}

}

这是服务中的removePost方法：

removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;
const url = `${this.postsUrl}/${id}`;

return this.http.delete<Post>(url, httpOptions);

removePost（post:post | number）：可观察{
const id=typeof post==“number”？post:post.id；
constURL=`${this.postsUrl}/${id}`；
返回this.http.delete（url，httpOptions）；

}

HTML文件

    <div class="card mb-2" *ngFor= 'let msg of posts'>
  <div class="card-body">
    <h3>{{msg.title}}</h3>
    {{msg.body}}
    <hr>
    <button (click)= 'removePost(msg)' class="btn btn-danger">
      <i class="fa fa-remove light"></i>
    </button>

    <button (click)='editPost(msg)' class="btn btn-light">
      <i class="fa fa-pencil light"></i>
    </button>

  </div>
</div>

{{msg.title}
{{msg.body}

正如错误消息所述，问题在于

number

没有Post对象所具有的字段

id

。这就是为什么typescript拒绝接受此方法签名为有效的原因。对象必须具有相同的强制字段集

您可以尝试创建一个包含Post对象包含的所有字段的包装器对象，并将

编号添加为附加字段。但我会避免这种努力，而是尝试使用两种不同的方法共享一个主要方法：

以某种方式：

您的TS文件

removePost(post: Post) {
    if (confirm('Are you Sure?')) {
      this.postService.removePostById(post.id).subscribe(() => { 
          this.posts.forEach((cur, index) => {
              if (post.id === cur.id ) {
                   this.posts.splice(index, 1);
              }
          });
      });
   }
}

public removePostById(id: number): Observable<Post> {
    return this.removePost(id);
}

public removePostByPostObject(post: Post): Observable<Post> {
    return this.removePost(post.id);
}

private removePost(id: number): Observable<Post> {
    const url = `${this.postsUrl}/${id}`;

    return this.http.delete<Post>(url, httpOptions);
}

您的服务

removePost(post: Post) {
    if (confirm('Are you Sure?')) {
      this.postService.removePostById(post.id).subscribe(() => { 
          this.posts.forEach((cur, index) => {
              if (post.id === cur.id ) {
                   this.posts.splice(index, 1);
              }
          });
      });
   }
}

public removePostById(id: number): Observable<Post> {
    return this.removePost(id);
}

public removePostByPostObject(post: Post): Observable<Post> {
    return this.removePost(post.id);
}

private removePost(id: number): Observable<Post> {
    const url = `${this.postsUrl}/${id}`;

    return this.http.delete<Post>(url, httpOptions);
}

public removePostById（id:number）：可观察{
返回此.removePost（id）；
}
public removePostByPostObject（post:post）：可观察{
返回此.removePost（post.id）；
}
private removePost（id:编号）：可观察{
constURL=`${this.postsUrl}/${id}`；
返回this.http.delete（url，httpOptions）；
}