如何在Blazor中绑定到集合/列表中的元素

Question

我想在循环中将值绑定到列表中的元素，但我找不到好的解决方案。

<EditForm Model="@dailyReport" OnValidSubmit="@SubmitDailyReport">
<p>
<label>Count: </label>
<InputNumber min="1" id="numberOfEffects" @bind-Value="numberOfEffects" />
</p>
@{
for (int i = 1; i <= numberOfEffects; i++)
{
if (effects.Count < i)
{
effects.Add("");
}
if (effects.Count > i)
{
effects.RemoveAt(effects.Count - 1);
}
string concatId = "effect" + i.ToString();
<p>
<label for="@concatId">@i</label>
<InputText id="@concatId" @bind-Value="effects.ElementAt(i-1)" />
</p>
}
}
//rest code
</EditForm>

当我试图将Value绑定到列表中的元素时，我得到了一个错误：

1. 错误CS0131:赋值的左侧必须是变量、属性或索引器错误
2. 错误CS1662:无法转换lambda表达式转换为预期的委托类型，因为某些返回块中的类型不能隐式转换为委托返回类型

我想知道是否有任何可能的方法将数据绑定到集合。我需要它，因为我的模型有一个类型为List的属性。在我的输入表单中，我希望允许添加用户需要的任意多的字符串。

编辑：

@code
{
private DailyReport dailyReport = new DailyReport();
private List<string> effects = new List<string>();
}

我也尝试在foreach循环中执行此操作，但显示了另一个错误：无法分配给"effect"，因为它是"foreach迭代变量">

foreach (var effect in effects)
{
index++;
Console.WriteLine(index);
string concatId = "effect" + index.ToString();
<p>
<label for="@concatId">@index</label>
<InputText id="@concatId" @bind-Value="effect" />
</p>
}

Answer 1

绑定无法工作：当输入文本的值更改时，您希望修改列表，而不是元素本身。

相反，您必须在两个方向上"拆分"绑定的作用：

• 根据模型的值设置输入字段的值
• 当输入字段的值更改时设置模型

下面的代码显示了如何解决主要问题，然后您必须根据自己的需要进行调整。

@foreach (var element in effects.Select((e, i) => new { Effect = e, Index = i}))
{
<p>
<label for="@($"effect{element.Index}")">@element.Index</label>
<input id="@($"effect{element.Index}")" value="@element.Effect"
@onchange="@(e => effects[element.Index] = e.Value.ToString())" />
</p>
}
@code {
private List<string> effects = new List<string>() { "a", "b", "c" };
}

第一行完成了任务：它将列表转换为可枚举对象，其中每个元素都是一个新对象，它封装了effects列表中的索引和值。您之所以需要索引，主要是因为@onchange事件，它必须知道应该在原始列表中的何处更新值。

如果你喜欢，你可以使用for循环：

@for (int i = 0; i < effects.Count; i++)
{
// see https://stackoverflow.com/a/56426146/323447
var iCopy = i;
<p>
<label for="@($"effect{i}")">@i</label>
<input id="@($"effect{i}")" value="@effects[i]"
@onchange="@(e => effects[iCopy] = e.Value.ToString())" />
</p>
}
@code {
private List<string> effects = new List<string>() { "a", "b", "c" };
}