Не удается найти модуль async_hooks в приложении Angular

Question

Попытка удалить сообщение с сайта jsonplaceholder / post в компоненте post моего углового приложения.При вызове delete HTTP из заполнителя Json с помощью службы я получаю следующую ошибку.

ОШИБКА в src / app / components / post / post.component.ts (5,27): ошибка TS2307: Не удается найти модуль 'async_hooks'.src / app / components / post / post.component.ts (55,35): ошибка TS2345: Аргумент типа 'Number' не может быть назначен параметру типа 'number |Сообщение'.Тип «Номер» нельзя назначить типу «Сообщение».Свойство 'id' отсутствует в типе 'Number'.

Это метод удаления поста в компоненте, где происходит удаление:

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>

Answer 1

Как говорится в сообщении об ошибке, проблема в том, что number не имеет поля id, как у вашего Post-объекта.И именно поэтому машинопись не принимает эту подпись метода как действительную.Объекты должны иметь одинаковый набор обязательных полей.

Вы можете попытаться создать объект-оболочку, который содержит все поля, которые содержит ваш 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);
}