HttpClient не работает должным образом на RESTful API

Question

Метод удаления не выдает мне ошибку, поскольку я передаю 1000 в качестве аргумента, которого нет в 'https://jsonplaceholder.typicode.com/posts' json документе.Вместо этого он просто удаляет выбранный документ.Я искал везде, но не нашел ни одного кода, который бы указывал, как решить эту проблему.Буду признателен за любую помощь, поскольку я новичок в Angular Framework.

Ниже приведен мой файл кода обслуживания (post.service.ts)

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { NotFoundError } from '../common/not-found-error';
import { AppError } from '../common/app-error';
import { BadInput } from '../common/bad-input';

// For handling Http Requests
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class PostService {
    private url = 'https://jsonplaceholder.typicode.com/posts';
    private userUrl = 'https://jsonplaceholder.typicode.com/users';

    constructor(private http: HttpClient) {}

    getPosts() {
        return this.http.get(this.url);
    }

    deletePost(id) {
            console.log('Service Id: ', id);
            return this.http.delete(this.url + '/' + id)
                .pipe(
                    catchError((error: HttpErrorResponse) => {
                        if (error.status === 404) {
                            console.log('You screwed');
                            return throwError(new NotFoundError());
                        }
                        return throwError(new AppError(error));
                    })
                );

Это мой файл компонента (сообщение.component.ts)

deletePost(post) {
    console.log('Post Id is: ', post.id);
    this.service.deletePost(1000)
        .subscribe(
            response => {
                let index = this.posts.indexOf(post);
                this.posts.splice(index, 1);
                console.log(response);

            },
            (error: AppError) => {
                if (error instanceof NotFoundError) {
                    alert('This post has already been deleted');
                } else {
                    alert('An Unexpected error occurred.');
                    console.log(error);
                }
            });
}

ngOnInit() {
    this.service.getPosts()
        .subscribe((response) => {
            this.posts = response;
            console.log('Posts: ', this.posts);
        }, error => {
            alert('An Unexpected error occurred.');
            console.log(error);
        });
}

Это мой файл Component.html (posts.component.html)

<ul class="list-group">
    <li *ngFor="let post of posts" class="list-group-item">
        <button (click)="deletePost(post)" class="btn btn-danger btn-sm">Delete</button>{{ post.title }}
    </li>
</ul>
<br>

Answer 1

Я использую этот подход, надеюсь, это поможет.(Если вы вернете свой сервисный результат как Наблюдаемый, будет проще управлять его результатами со стороны компонента.)

ОБНОВЛЕНИЕ:

myService.ts

deleteDocumentService(documentId: number): Observable < any > {
    var result: Observable < any > = this.http.delete < any > (`${this.apiBaseUrl}document/${documentId}`);
    return result;
}

myComponenet.ts

import {myService} from './Services/myService'

deleteDataSubscription: Subscription;
data: any;


constructor(public _myService: myService) {}

//you will fire this function when button is clicked
deleteDocument(id:number) {
    //call your delete service here
    this.deleteDataSubscription = this._myService.deleteDocumentService(id)
        .subscribe(
            (success) => {
                //if your delete operation is succesfully, do what ever you want here
                //now you can fire a function or trigger to remove entry from your table
            },
            (error) => {
                //if your delete operation is unsuccesfully, console log error.                      
                console.log(err);
            }
        }
);
}

Answer 2

API, который вы вызываете, возвращает JSONObject.Не ошибкаСм. Вызов POSTMAN API

.

Поскольку это не ошибка, CatchError не выполняется.

ОБНОВЛЕНИЕ
Поскольку ошибки нет, ваша часть успеха выполняется.Который принимает индекс возвращаемого объекта в существующем массиве posts.Если вы зарегистрируете индекс в консоли, вы увидите, что он будет равен -1.
Не проверяя, найден ли индекс или нет, вы передаете его для склейки.array.splice(-1,1) удалит последний элемент из массива.Следовательно, элемент li удаляется.

Подробнее о Array.indexOf и Array.splice

Необходимо проверить, является ли индексвозвращенный объект присутствует в вашем массиве.затем выполните сращивание.