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>

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

了解更多信息

Answer 2

我让它起作用。这有点复杂，但可能会对其他人有所帮助。...

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

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

定义了该属性：

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

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

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

单击按钮时，它会执行所需的所有操作，然后调用此操作（这是我页面上定义的方法），并传递信息。

该方法检查button提供的数据，并决定如何更新List。如@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组件-对列表参数更改做出反应

2 个答案: