Angular：在循环中执行连续的 HTTP-Delete 不起作用

Question

我正在开发一个具有 Angular CRUD 操作的网站，但我很难在我的数据库上执行连续删除。

我恢复了我的 ID，这些 ID 需要从我的数据库中删除到一个名为 « this.checkedLogs » 的数组中（这部分确实有效）。
然后，当我点击一个按钮时，我调用了一个用于执行这些删除的函数：« onModalConfirm »。
问题是它运行得太快以至于我的迭代器没有时间更改它的值和要从我的数组中删除的实际 ID，以至于函数已经循环了。
此外，在循环结束时，条件 « if (this.checkedLogs.length == 0) » 不成立，这表明它进行得如此之快。

我正在考虑添加等待函数，但我不知道这是否符合良好做法。我仍然是 Angular 的初学者，我对 Observable 周围的一切还不是很满意。

这是我的 service.ts :

deleteLogsByID(id: number): Observable<any> {
    return this._httpClient.delete(`${API_BASE_URL}/delete/id/${id}`, {responseType: 'text'});
  }

这是我的 component.ts :

deleteLogsByID(id: number): void {
        this.logsSubscription = this.LogsService.deleteLogsByID(id).subscribe(
            (data: any) => {
                this.deleteMessage = data;
            },
            (error: HttpErrorResponse) => {
                this.showSpinner = false;
                this.error = error.message;
                this.showError = true;
            }
        );
    }

onModalConfirm() {
        /** Getting the length of my array by updating this.selectionAmount */
        this.updateSelectionAmount();

        /** If it’s not empty */
        if (this.selectionAmount != 0) {

            let iterator = this.checkedLogs.values();
            for (let index = 0; index < this.selectionAmount; index++) {
                /** Getting the id of the iterator */
                let id: number = iterator.next().value;

                /** Calling my delete function */
                this.deleteLogsByID(id);


                /** Removing the id from the array */
                this.checkedLogs.splice(id, 1);
            }

            /** When everything is done, reload the page */
            if (this.checkedLogs.length == 0)
                window.location.reload()
        }
    }

updateSelectionAmount() {
        this.selectionAmount = this.selection.selected.length;
    }

html 代码在我的问题中似乎并不重要，但这是我删除函数的后端代码（工作正常）：

@ApiOperation(value = "Delete a logs by its id", produces = "application/json")
@PreAuthorize("hasRole('MODERATOR') or hasRole('ADMIN')")
@DeleteMapping("/delete/id/{id}")
public ResponseEntity<String> deleteLogsById(@PathVariable Integer id) {

    Integer idRemoved = logsService.deleteLogsById(id);

    if (idRemoved == 0)
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);

    String responseReturn = "Logs removed with id " + id;

    return new ResponseEntity<>(responseReturn, HttpStatus.OK);
}

提前致谢！

Answer 1

是的，你没看错，for循环执行的很快，调用了一堆request，checkedLogs在request执行前拼接。不知道你所有的应用程序逻辑，但我建议使用良好的旧回调来使删除操作有点顺序。 onModalConfirm 类似于：

onModalConfirm() {
    /** Getting the length of my array by updating this.selectionAmount */
    this.updateSelectionAmount();

    /** If it’s not empty */
    if (this.selectionAmount != 0) {
        let iterator = this.checkedLogs.values();
        const callDelete = () => {
            let id: number = iterator.next().value;
            const continueFn = (id) => {
                if (id !== undefined) {
                    callDelete();
                }
            }
            if (id !== undefined) {
                this.deleteLogsByID(id, continueFn);
            }
        }
        callDelete();
    }
}

并且 deleteLogsByID 将是：

deleteLogsByID(id: number, callbackFn: (id: number) => void): void {
    this.logsSubscription = this.LogsService.deleteLogsByID(id).subscribe(
        (data: any) => {
            this.deleteMessage = data;
            callbackFn(id)
        },
        (error: HttpErrorResponse) => {
            this.showSpinner = false;
            this.error = error.message;
            this.showError = true;
            callbackFn(id);
        }
    );
}

Angular：在循环中执行连续的 HTTP-Delete 不起作用

Angular : Perfoming successive HTTP-Delete in a loop doesn't work

angular

crud

angular2-observables

http-delete