blazor模板内的双向数据绑定

Question

我想在模板内的组件与其父组件之间使用双向数据绑定。单向数据绑定运行良好。但是，当我修改从RenderFragment传递的Context时，此修改不会传播到模板(容器(。这是一个例子。

这就是模板定义。我们有一个表单，我们希望能够在模型的函数中指定表单的内容。

@typeparam TItem
@typeparam TItemDtoCU
@typeparam TDataService
<EditForm Model="@Item" OnValidSubmit="HandleValidSubmit" class="item-editor">
<DataAnnotationsValidator />
@FormContentTemplate(Item)
<span class="save">
<MatButton Type="submit" Raised="true">Save</MatButton>
<MatButton Type="reset" Raised="true" OnClick="HandleCancelSubmit">Cancel</MatButton>
</span>
</EditForm>

这是我使用这个模板的地方

<ModelEditorTemplate TItem="ClassName"
TItemDtoCU="OtherClassName"
TDataService="ServiceClassName"
ItemId="SelectedItem?.Id"
OnItemAdded="ItemAdded"
OnItemUpdated="ItemUpdated">
<FormContentTemplate>
<span>
<MatTextField Label="Name" @bind-Value="context.Name" @bind-Value:event="onchange" />
<ValidationMessage For="@(() => context.Name)" />
</span>
</FormContentTemplate>
</ModelEditorTemplate>

当用户修改MatTextField字段时，该字段将重置为模板组件提供的初始值。

你有主意吗？

编辑1:有关我们获取数据的方式的更多信息

是的，TDataService正在从RESTApi获取组件。这里的分部类链接到模板：

public partial class ModelEditorTemplate<TItem, TItemDtoCU, TDataService> : ParentThatInheritsFromComponentBase
where TItem : BaseEntity, new()
where TDataService : ICrudService<TItem, TItemDtoCU>
{
public TItem Item = new TItem();
[Inject]
protected TDataService DataService { get; set; }
protected override async Task OnParametersSetAsync()
{
//...
await LoadItem();
// ...
}
protected async Task LoadItem()
{
//...
Item = await DataService.Get(ItemId.Value);
// ....
}
}

Answer 1

当FormContentTemplateRenderFragment内部的字段更新模型时，它会触发模板的OnParametersSetAsync方法，该方法会再次从服务器获取数据，更新模型，然后覆盖用户所做的修改。

没有问题，模板中的表单输入只是对它的工作原理理解不好。

我使用SetParametersAsync来检查更改的参数是否是我要查找的参数，而不是RenderFragment，从而纠正了这个问题。ItemId是我从DataService中获取的记录的id。

public override async Task SetParametersAsync(ParameterView parameters)
{
_hasIdParameterChange = false;
if(parameters.TryGetValue(nameof(ItemId), out int? newItemIdValue))
{
_hasIdParameterChange = (newItemIdValue != ItemId);
}
await base.SetParametersAsync(parameters);
}