Blazor 组件 - 对列表参数更改做出反应

Question

我不清楚如何让 Blazor（服务器）组件对其参数之一的更改做出反应。

所以，这是我的组件的精简版

@foreach (var msg in this.Data)
{
    <div class="bg-danger text-white">
        <div>@msg</div>
    </div>
}
@code
{
    [Parameter]
    public IList<Something> Data{ get; set; } = null!;
}

然后在我的页面中我有

<mycomponent Data="@StuffForComponent"><mycomponent>
@code
{
    private List<Something> StuffForComponent {get;} = new List<Something>();

    private async Task HandleSomeEvent()
    {
          var r = await this.Service.GetSomething().ConfigureAwait(false);
          this StuffForComponent.AddRange(r.Stuff);
    }
}

所以想法是在页面加载时创建组件，并将空列表传递给它的输入参数。

稍后，我们处理一个用户事件并将数据添加到该列表。但是，组件不会对更改后的列表做出反应。

我需要做什么才能使组件对添加到此列表或从该列表中删除的新条目做出反应？

Answer 1

您需要为组件添加回调事件才能正确更新。尝试在子组件上添加事件回调，然后在您的页面中使用“@Bind”将页面列表绑定到子组件内部列表。

这是子组件添加：

code{

...
 [Parameter]
    public EventCallback<List<Something>> DataChanged{ get; set; }
...
}

这是页面更改

<mycomponent @bind-Data="StuffForComponent"><mycomponent>

这称为链式绑定，您可以通过搜索 "chain" here

了解更多相关信息

Answer 2

我成功了。它有点复杂，但它可能会对其他人有所帮助....

所以我有一个 Razor 页面，我的组件位于页面顶部：

<mycomponent Data="@StuffForComponent"><mycomponent>

根据属性定义：

private List<Something> StuffForComponent {get;} = new List<Something>();

我有一个网格，每行有一个按钮。该按钮定义了一个动作：

[Parameter]
public IList<Action<object>>? Actions { get; set; }

当按钮被点击时，它会做任何它必须做的事情，然后它调用这个动作（这是我页面上定义的一个方法），传递信息。

该方法检查按钮提供的数据，并决定如何更新列表。正如@dani 提到的，它需要 StateHasChanged()。

我实现为：

private void MyCallbackMethod(object obj)
{
    this.StuffForComponent.Clear();
    if (obj is SomeType response)
    {
        InvokeAsync(() =>
        {
            this.StuffForComponent.Add(response.ValueToInspect
            ? new Something{ .... }
            : new Something{ .... });

            this.StateHasChanged();

        }).GetAwaiter().GetResult();
    }
}

它需要 InvokeAsync，因为这不是 UI 主线程。

Blazor 组件 - 对列表参数更改做出反应

Blazor component - react to list parameter changing

blazor

blazor-server-side