0

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

src/app/components/post/post.component.ts(5,27) 中的错误：错误 TS2307：找不到模块“async_hooks”。src/app/components/post/post.component.ts(55,35)：错误 TS2345：“数字”类型的参数不可分配给“数字”类型的参数 | 邮政'。类型“编号”不可分配给类型“邮政”。“数字”类型中缺少属性“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);

}

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>
4

1 回答 1

0

正如错误消息所述，问题在于number没有id像您的 Post-object 那样的字段。这就是打字稿拒绝接受此方法签名为有效的原因。对象必须具有相同的必填字段集。

您可以尝试创建一个包含 Post-Object 包含的所有字段的包装对象，并将其添加number为附加字段。但我会避免这种努力，而是尝试使用两种不同的方法共享一个主要方法：

以某种方式：

您的 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);
}
于 2018-06-06T18:37:46.403 回答