Модальное значение - это привязка к последней ячейке таблицы вместо выбранной - PullRequest
Новая
       17

Модальное значение - это привязка к последней ячейке таблицы вместо выбранной

0 голосов
/ 05 ноября 2019

У меня есть таблица с кучей строк, и для какой-то ячейки в строке я предоставляю возможность открыть модальное окно и вручную изменить значение или выбрать что-то из выпадающего списка.

Когда я выбираюиз раскрывающегося списка, ячейка обновляется, как это должно быть. Однако, если я попытаюсь позволить им использовать модальное значение и ввести значение, то введенное ими значение будет привязано к последней строке таблицы. Я не понимаю, почему это происходит.

Вот соответствующий код.

Таблица: 

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

1 Ответ

0 голосов
/ 05 ноября 2019

вам нужно сделать копию элемента внутри цикла, а затем использовать 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>

в противном случае все элементы получают ссылку на последний элемент.

...