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>

这称为链式绑定，您可以通过搜索“链” here了解更多有关此的信息>