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

Question

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

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>
                }

Answer 1

我粗略地检查了您的代码，但我相信以下内容会解决您的问题。按照下面的建议尝试，如果还是不行，我明天再解决。

按照之前的建议使用 InputText 组件。
这个 @foreach (var paintUsed in elem.PaintsUsed) 永远无法工作，因为您尝试使用 'foreach iteration variable.' 绑定到字符串集合而不是定义一个 class，我们称它为 PaintsUsedStrings, 像下面这样

public class PaintsUsedStrings { public 字符串字符串值 { 得到;放; } }

并在您的 MiniElement class 中更改属性

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" />
      
    }

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

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

How to adjust member variables in a foreach loop in a Blazor page?

c#

razor

asp.net-core

blazor

blazor-server-side