模式值绑定到表中的最后一个单元格，而不是选定的单元格

Question

我有一个包含一堆行的表，对于行中的某个单元格，我提供了打开模态并手动更改值的选项，或者从下拉列表中选择一些内容。

当我从下拉列表中进行选择时，单元格会按照应该的方式更新。但是，如果我试图让他们使用模态并输入值，那么他们输入的值就会绑定到表中的最后一行。我不明白为什么会发生这种事。

这是相关代码。

表：

@foreach (Item item in items)
{
<tr>
<td>@item.Name</td>
<td>
<div class="input-group input-group-sm">
<BlazoredTypeahead SearchMethod="search.something"
@bind-Value="@item.Amount"
Debounce="500"
tabindex="0">
<SelectedTemplate Context="amt">
@amt
</SelectedTemplate>
<ResultTemplate Context="amt">
@amt
</ResultTemplate>
<FooterTemplate>
<div class="blazored-typeahead__result no-border-top" @onclick="showAmountModal">
Other...
</div>
</FooterTemplate>
</BlazoredTypeahead>
<DropdownOtherInputModal Name="Amount" @ref="amountModal" @bind-Data="@item.Amount"></DropdownOtherInputModal>
</div>
</td>

模式：

<BSModal @ref="modal" IsCentered="true">
<BSModalHeader OnClick="@onToggle">Enter @Name</BSModalHeader>
<BSModalBody>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">@Name</span>
</div>
<InputText type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" @bind-Value="input"/>
</div>
<hr>
<button class="btn btn-primary btn-sm global-btn-submit global-modal-btn-align" @onclick="onSave">Submit</button>
<button type="button" class="btn btn-primary btn-sm global-btn-cancel global-modal-btn-align" @onclick="@onToggle">Cancel</button>
</BSModalBody>
</BSModal>
[Parameter]
public string Name { get; set; }
[Parameter]
public string Data { get; set; }
[Parameter]
public EventCallback<string> DataChanged { get; set; }
public string input { get; set; }
BSModal modal;
public void onSave()
{
Data = input;
DataChanged.InvokeAsync(input);
modal.Hide();
}

Answer 1

您需要在循环中复制该项，然后使用LocalItem将该行戳掉，如下所示

@foreach (Item item in items)
{
Item localItem = item; 
<tr>
<td>@localItem.Name</td>
<td>
<div class="input-group input-group-sm">
<BlazoredTypeahead SearchMethod="search.something"
@bind-Value="@localItem.Amount"
Debounce="500"
tabindex="0">
<SelectedTemplate Context="amt">
@amt
</SelectedTemplate>
<ResultTemplate Context="amt">
@amt
</ResultTemplate>
<FooterTemplate>
<div class="blazored-typeahead__result no-border-top" @onclick="showAmountModal">
Other...
</div>
</FooterTemplate>
</BlazoredTypeahead>
<DropdownOtherInputModal Name="Amount" @ref="amountModal" @bind-Data="@item.Amount"></DropdownOtherInputModal>
</div>
</td>

否则，所有项目都将获得对最后一个项目的引用。