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>

否则所有项目都将引用最后一个项目。

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

1 个答案: