从列表中删除项目会弄乱列表中的其余项目

Question

我在 blazor 中有一个 html 表，它填充循环列表（列减少以显示相关代码）

@foreach (var line in lines)
     {@{ var linenumber = lines.IndexOf(line)}
             <td>
                 <DDItems @bind-Binder="line.item"></DDItems>
             </td>
              <td>
                 <button type="button" @onclick="@(() => removeRow(linenumber))">Remove</button>
             </td>
     }

 @Code{
private List<TransactionSALine> lines = new List<TransactionSALine>();
   private async Task removeRow(int linenumber)
 {
     lines = lines.Where(u => lines.IndexOf(u) != linenumber).ToList());

 }
}

当我从表中删除其中一行时，其他行中选择的项目会发生变化。

• 我尝试使用数组而不是列表，但这没有帮助。
• 尝试使用 Linq 和 RemoveAt() 更改 removerow() 方法。 不改变结果。

在删除带有产品“铅笔”的行之前：

取出产品“铅笔”后：

Answer 1

您的代码段不包含<tr>元素。 它必须在那里，在 foreach() 中的第一级。 您可以通过指定一个键来帮助渲染：

@foreach (var line in lines)
{
   <tr @key="@line">
   ... 
   </tr>
}

我认为这可以解决消失的 Pen 项目，试试吧。

附带说明一下，您可以大大简化删除操作：

  @onclick="@(() => lines.Remove(line))">


// private async Task removeRow(int linenumber)
// {
//     lines = lines.Where(u => lines.IndexOf(u) != linenumber).ToList());
// }