无法删除数组中的嵌套数组元素

Question

在下面的屏幕截图中，提到嵌套元素作为子数组。

我想删除子数组元素，我在脚本下面使用，但它只删除第一个元素。

removeChildWidget(parIndex:number,index:number){
    if (parIndex >= 0) {
       const widgetNumber = this.dashRightWidget[parIndex]?.widgetNumber;
       const widgeDashtNumber = this.dashboardWidgets[parIndex]?.widgetNumber;

       this.widgets.forEach((widget) => {
        if (widget.widgetNumber == widgeDashtNumber) {

          console.log("wid",widget.child[index])
          if (index >= 0) widget.child.splice(index, 1)
         console.log("wid",widget)
        }
      });
      console.log('final output', this.dashboardWidgets)
  
    }    
  }

Answer 1

问题出在 forEach 循环中。当您迭代

widgets

数组并检查条件

(widget.widgetNumber == widgeDashtNumber)

时，它仅匹配一个小部件，当您使用

splice()

时，它会根据第一个匹配元素进行调用。这会导致仅修改第一个匹配项。

要删除所有子数组元素，您需要迭代

this.widgets

数组中的所有项目，检查每个父项，如果满足条件，则删除子项。

更多参考请参考以下代码：

removeChildWidget(parIndex: number, index: number) {
  if (parIndex >= 0) {
    const widgeDashtNumber = this.dashboardWidgets[parIndex] ? .widgetNumber;

    this.widgets.forEach((widget) => {
      if (widget.widgetNumber === widgeDashtNumber && widget.child && index >= 0) {
        widget.child.splice(index, 1); // Remove all children at the specified index if the widget.child exists
      }
    });

    console.log('Updated widgets:', this.widgets);
    console.log('Final output:', this.dashboardWidgets);
  }
}

注意：这是基于所提供的最低事实。如能提供实际情况，不胜感激

Answer 2

一般来说，您应该避免使用 javaScript 删除元素。使其成为 .html

我真的不知道你的代码，但是如果你有一个

@for

迭代数组，并且只需要更改数组

@for (element in filteredArray;track $index)
{
    @for (child in filteredArray.childs;track $index)
    {
        <your-child>
    }
}

还有

removeChildWidget(parIndex,index)
{
     filteredArray[parIndex].child.splice(index,1);
     filteredArray[parIndex].child=[...filteredArray[parIndex].child]
}