时间戳

首页 > 解决方案 > 如何在 Blazor 页面的 foreach 循环中调整成员变量？

c# - 如何在 Blazor 页面的 foreach 循环中调整成员变量？

问题描述

我的 Blazor 页面中的 foreach 循环存在一些问题。我正在尝试输入油漆下拉菜单并让用户从中进行选择。但是，当我在下拉列表中选择一种绘画时，它实际上并没有绑定到输入字段。我知道下拉菜单的逻辑应该可以正常工作，因为我在另一个可以正常工作的页面上使用了它。我正在使用本地临时变量，因为我无法更改 foreach 循环中的元素。我也不能使用 for 循环，因为我得到索引越界错误，我猜这与获取计数和渲染时间有关。如果有人有更好的建议，我很想听听！代码块在下面，如果您需要更多上下文，这里也是我的仓库的链接。提前致谢！

foreach (var elem in newMini.Elements)
                {
                    <div class="@elem.Name">
                        <InputText @bind-Value="elem.Name" placeholder="Element name" />
                        @foreach (var paintUsed in elem.PaintsUsed)
                        {
                            var curPaintUsed = paintUsed;
                            <div class="@curPaintUsed">
                                current paint: @curPaintUsed 
                                <input type="text"
                                       list="paint-search"
                                       placeholder="Search from @allPaints.Count() paints!"
                                       @bind-value="@curPaintUsed" />
                                <datalist id="paint-search">
                                    @foreach (var paint in allPaints)
                                    {
                                        <option>@paint.PaintName</option>
                                    }
                                </datalist>
                            </div>
                        }
                        @if (!String.IsNullOrWhiteSpace(elem.Name))
                        {
                            <button type="button" @onclick="() => AddPaintToElement(elem)">
                                Add Paint To Element
                            </button>
                        }
                    </div>
                }

标签： c#asp.net-corerazorblazorblazor-server-side

解决方案

我已经从表面上检查了您的代码，但我相信以下内容将解决您的问题。尝试按照以下建议进行，如果仍然无法正常工作，我将尝试明天解决。

  1. 按照之前的建议使用 InputText 组件。

  2. @foreach (var paintUsed in elem.PaintsUsed)当您尝试使用“foreach 迭代变量”绑定到字符串集合时，这永远不会起作用。而是定义一个类，我们称之为它PaintsUsedStrings，如下所示

    公共类 PaintsUsedStrings { 公共字符串 StringValue { 获取；放; } }

并在您的MiniElement班级中更改属性

public List<String> PaintsUsed { get; set; } = new();

到：

public List<PaintsUsedStrings> PaintsUsed { get; set; } = new();

并将组件中的代码更改为如下所示：

 @foreach (var _paintsUsedStrings in elem.PaintsUsed)
    {
        current paint: @_paintsUsedStrings.StringValue 
        <InputText list="paint-search" placeholder="Search from <...> 
                                                             paints!"                                        
         @bind-Value="@_paintsUsedStrings.StringValue" />
      
    }

如您所见，我们绑定到字段变量，而不是迭代变量。我认为这应该解决绑定到集合的问题。

推荐阅读