JavaScript Array.splice停止在我的Angular项目中正确工作

Question

我当时正在Angular 4中的一个项目，需要通过一系列ID进行批处理。我会将删除的项目发送到可观察的功能，当订阅返回时，我会在循环批次之前检查剩余的数组。

我第一次做到这一点，它运行得很好，随着时间的推移，原始阵列减少到零项目。我第二次这样做不再起作用。每次订阅返回时，原始数组突然突然又满了。

原始数组是正在订阅的组件的元素。

RemoveItemsArray : Array<number>;

我有一个事件处理程序功能初始化值并调用批处理功能。

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = payload.items;
            this.ProcessRemoveItems();
            break;
    }
}

批处理函数将在调用API函数之前正确记录正确尺寸的数组。然后，在响应中，所有物品都回来了，因此它变成了无限的循环。

ProcessRemoveItems()
{
    let executeItems = this.RemoveItemsArray.splice(0, 10);
    this.service.RemoveItemsAPI( executeItems )
        .subscribe ( response =>  {
            if( response.StatusCode == 200 )
            {
                if( this.RemoveItemsArray.length > 0 )
                {
                    this.ProcessRemoveItems();
                }
                else
                {
                    this.HandleAction(“finish”,null);
                }
            }
        });
}

Answer 1

很可能您正在修改排水中间其他地方的阵列。

如果是这种情况，您需要制作阵列的副本。我无法从给定代码中分辨出正在进行哪些修改，因此我所能做的就是给您一些猜测。

解决方案1：复制pareload.items to removeItemSarray。

此假设emove> removeItemsArray在排水期间未修改< /strong>

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = [...payload.items];
            this.ProcessRemoveItems();
            break;
    }
}

解决方案2：将所有新数组传递到ProcessRemoveItems

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = payload.items;
            this.ProcessRemoveItems([...payload.items]);
            break;
    }
}

ProcessRemoveItems(items)
{
    let executeItems = items.splice(0, 10);
    this.service.RemoveItemsAPI( executeItems )
        .subscribe ( response =>  {
            if( response.StatusCode == 200 )
            {
                if( items.length > 0 )
                {
                    this.ProcessRemoveItems(items);
                }
                else
                {
                    this.HandleAction(“finish”,null);
                }
            }
        });
}