Question

我想使用下拉列表（选择）稍后传递一些值。因此，我在具有InputSelect的地方调用.razor组件。

val moshi = Moshi.Builder()
    .add(KotlinJsonAdapterFactory())
    .build()
val adapter = moshi.adapter<Wrapper>(Wrapper::class.java)
val paymentRequests = adapter.fromJson(response.body!!.source())!!.list

当我调用此“ Test.razor”组件时，它没有将“ para.selected”绑定到所选值，该值仅在初始化时设置，而后一次没有设置。

<EditForm Model="para">

    <Test Text="Para" Value="@para.Selected" Units="@units"></Test> <span>Selected string:  @para.Selected</span>

</EditForm>

<EditForm Model="selectParameters">   
        <TestAsParameter Para="selectParameters"></TestAsParameter> <span>Selected string:  @selectParameters.Value</span>    
</EditForm>
<br />
<button class="btn btn-primary my-2" @onclick="Calculate">Calculate</button>

@code
{
    List<string> units = new List<string>() { "m", "cm", "mm" };
    Parameters para;
    SelectParameters selectParameters { get; set; }

    protected override void OnInitialized()
    {
        // set initial values
        para = new Parameters();
        para.List = units;
        para.Selected = para.List[0];

        selectParameters = new SelectParameters();
        selectParameters.Text = "Select parameters";
        selectParameters.Value = "mm";
        selectParameters.Units = units;
    }

    private void Calculate()
    {

    }

    public class Parameters
    {
        public List<string> List { get; set; }
        public string Selected { get; set; }
    }

如果我用参数设置了新对象，则出价没有问题，返回的值是选定的。调用“ TestAsParameter.razor”

<div class="my-2">

    @if (Text.Length > 0)
    {
        <label class="col-sm-2 col-lg-3">@Text</label>
    }
    <InputSelect @bind-Value="@Value" class="col-2">
        @foreach (var unit in Units)
        {
            <option value="@unit.ToString()">@unit</option>
        }
    </InputSelect>

</div>  

@code {
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Values { get; set; }

    [Parameter]
    public List<string> Units { get; set; } = new List<string>();
}

这是新对象

<div class="my-2">
    @if (Para.Text.Length > 0)
    {
        <label class="col-sm-2 col-lg-3">@Para.Text</label>
    }
    <InputSelect @bind-Value="@Para.Value" class="col-2">
        @foreach (var unit in Para.Units)
        {
            <option value="@unit">@unit</option>
        }
    </InputSelect>
</div>


@code {

    [Parameter]
    public SelectParameters Para { get; set; }

}

有人可以解释为什么InputSelect在Test.razor中不起作用，而在TestAsParameter.razor中起作用吗？

Answer 1

<EditForm Model="para">

   <Test Text="Para" Value="@para.Selected" Units="@units"></Test> 
      <span>Selected string:  @para.Selected</span>

Test是嵌套在EditForm组件中的子组件。为了使Test成为EditForm逻辑的一部分，必须将模型作为参数传递给测试组件。您可以执行以下操作：

<Test Model="para"></Test>

我删除了以下设置：Value="@para.Selected" Units="@units" 因为它们是多余的，因为模型实例para包含这些值。顺便说一下，名为Value的属性参数在Test组件中将其对应对象定义为Values。没有错误???我知道为什么不这样做，但是现在我不会让您感到困惑。以下是您的测试组件的外观：

Test.razor

<div class="my-2">

    <InputSelect @bind-Value="Model.Selected" class="col-2">
        @foreach (var unit in Model.List)
        {
           @if (unit != null && String.Equals(unit, Model.Selected, 
                                   StringComparison.OrdinalIgnoreCase))
           {
               <option selected value="@unit">@unit</option>
           }
           else
           {
               <option value="@unit.ToString()">@unit</option>
           }
        }
    </InputSelect>
 </div>  

@code {
    [Parameter]
    public Parameters Model{ get; set; }
}

这是将Test组件嵌入EditForm组件的方法：

    <EditForm Model="para">
       <Test Model="para"></Test><span>Selected string:  @para.Selected</span>
    </EditForm>

测试组件就这些了。如果您需要有关TestAsParameter.razor的启发，请告诉我。

注意：我在这里输入答案而没有测试...

Blazor InputSelect在某些情况下不起作用

1 个答案:

Test.razor