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

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>
}

我认为这可以解决消失的钢笔项目，尝试一下。

顺便说一句，您可以大大简化删除操作：

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


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