在 Blazor 中更改绑定到组件的模型时更新 UI答案

【问题标题】：Update UI when model bound to component is changed in Blazor在 Blazor 中更改绑定到组件的模型时更新 UI
【发布时间】：2021-03-21 09:45:45
【问题描述】：

我创建了我的代码的简化版本来演示我遇到的问题。我有一个自定义 Blazor 组件，TestComponent.razor：

@{ int index = 0; }
@foreach (var option in _value)
{
    <input id="@index" type="checkbox" @bind="@option.Selected" /><label for="@index">@option.Name</label>
    index++;
}

@code {
    [Parameter] public EventCallback<TestModel[]> ValueChanged { get; set; }
    private TestModel[] _value;
    [Parameter] public TestModel[] Value
    {
        get => _value;
        set
        {
            if (_value == value) return;
            _value = value;
            ValueChanged.InvokeAsync(value);
        }
    }
}

我有一个基本模型，TestModel.cs：

public class TestModel
{
    public string Name { get; set; }
    public bool Selected { get; set; }
}

我的页面只是将我的 TestModel 数组绑定到 TestComponent 并显示所有选定的选项：

@page "/"

<TestComponent @bind-Value="testOptions" />
@foreach (var option in testOptions)
{
    if (option.Selected)
    {
        <p>@option.Name</p>
    }
}

@code {
    private TestModel[] testOptions = new TestModel[]
    {
        new TestModel() { Name = "Amy", Selected = true },
        new TestModel() { Name = "Bob", Selected = false }
    };
}

在加载页面时，我会得到一个选定选项的列表。当我选中/取消选中任何选项时，我可以看到模型更新（我添加了一个将模型写入控制台的按钮）但 UI 没有更新。请有人告诉我让 UI 更新所选选项列表的方法是什么？

【问题讨论】：

更新模型后是否调用了StateHasChanged()？
谢谢，Jason D。是的，我尝试将它添加到设置器中，在 ValueChanged.InvokeAsync(value) 之前和之后，以及一起替换它。不幸的是，它没有明显的区别。
Jimi 您可以在名为 OnChange 的组件中创建一个 EventCallback，然后在事件处理程序中调用 StateHasChanged()。如果你喜欢我可以创建一个示例供你尝试
如果您不介意，那就太好了。谢谢，杰森。
实际上，杰森，我想我现在已经解决了这个问题。我将发布我修改后的代码。感谢 StateHasChanged() 的建议 - 这让我走上了正轨。

标签： asp.net-core blazor blazor-webassembly asp.net-core-5.0

【解决方案1】：

感谢 Jason 帮助我找到解决方案。我通过将 StateHasChanged() 添加到新创建的 OnChangeAsync 方法来完成这项工作。这需要一些摆弄，因为我的模型是一个数组，每个复选框只更改该数组的一个成员。

新的TestComponent.razor：

    @for (int i = 0; i < _value.Length; i++)
    {
        int index = i;
        <input id="@index" type="checkbox" checked="@_value[index].Selected" @onchange="async args => { await OnChangeAsync(args, index); }" /><label for="@index">@_value[index].Name</label>
    }
    
    @code {
        [Parameter] public EventCallback<TestModel[]> ValueChanged { get; set; }
        private TestModel[] _value;
        [Parameter] public TestModel[] Value
        {
            get => _value;
            init => _value = value;
        }
    
        public async Task OnChangeAsync(ChangeEventArgs args, int index)
        {
            _value[index].Selected = (bool)args.Value;
            await ValueChanged.InvokeAsync(_value);
            StateHasChanged();
        }
    }

【讨论】：