Question

我想通过“ AdditionalFields”动态创建我的Blazor网页上的一些SELECT控件。

为了在下一步中获取所有正确的数据，我需要将每个控件绑定到“ CheckoutData”变量。

但是我不知道如何创建一个变量/数组或类似的东西，通过绑定值在这里正确更新？还是在这种情况下我必须采取其他完全方法？

有关更多详细信息，您可以查看我的附件（Image）和此源代码：

@if (StoreData.StoreContainer?.AdditionalFields != null)
    @foreach (var additionalField in     StoreData.StoreContainer.AdditionalFields)
    {
        <div class="col-sm-6">
            <div class="page_input">
                <label> @additionalField.Caption </label>
                <InputSelect class="checkout-control pristine                 untouched" @bind-Value="@CheckoutData.OrderTimeType">
                    @foreach (var keyValue in additionalField.ValueList)
                                {
                        <option value="@keyValue.Sort"     selected="@(keyValue == additionalField.ValueList[0] ? "selected" : "")">@keyValue.SelectionText</option>
                                }
                </InputSelect>
            </div>
        </div>
    }

Answer 1

我已经创建了一个示例BlazorFiddle，该示例显示了如何处理AdditionalFields列表中的元素，大致按照问题中的示例进行操作。

为了显示选择，我在.Selected类中添加了AdditionalField属性，但是您可能将其存储在其他位置。

要注意的重点：

    int count = additionalFields.Count;
    for (var i=0; i < count; i++)
    {
        int current = i; // don't use loop variable in binding
        var additionalField = additionalFields[current];

我使用了for循环来遍历AdditionalFields并在循环中保存了当前索引-这对确保您不在@onchanged中传递循环变量很重要。事件处理程序。我没有在这里使用bind，所以很容易看到会发生什么。

                <select class="checkout-control pristine untouched" @onchange="((e) => HandleSelect(e, current))" >

我使用HTML选择而不是InputSelect，并处理了@onchange事件：这将事件参数e和当前索引传递给HandleSelect方法< / p>

您可能需要调整这种方法，但它显示了可以在Blazor中动态绑定的一种方法。

重要说明：代码将第二个字段的Selected值设置为第二个排序值，以证明selected属性正常工作。

但是，请注意，第一个字段显示“ sort 1”为选中状态，但不会触发事件-这是HTML自动选择选择列表中的第一个元素，因此第一个元素的{ {1}}属性仍然为空。确保在开始时设置“选定”，例如设置为第一个值，或者将空白Selected作为绑定到空白选择项的第一项。

Blazor绑定值以选择动态变量

1 个答案:

要注意的重点：