從列表中刪除項目會弄亂列表中的其余項目

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());
// }