Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/r/66.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Blazor组件-对列表参数更改作出反应_Blazor_Blazor Server Side - Fatal编程技术网

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

Blazor组件-对列表参数更改作出反应,blazor,blazor-server-side,Blazor,Blazor Server Side,我不清楚如何让Blazor(服务器)组件对其中一个参数的更改做出反应 所以,这是我的组件的精简版本 @foreach (var msg in this.Data) { <div class="bg-danger text-white"> <div>@msg</div> </div> } @code { [Parameter] public IList<Something> Data{ ge

我不清楚如何让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!;
}
@foreach(此.Data中的var msg)
{
@味精
}
@代码
{
[参数]
公共IList数据{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);
    }
}

@代码
{
私有列表StuffForComponent{get;}=new List();
私有异步任务HandleSomeEvent()
{
var r=wait this.Service.GetSomething().configurewait(false);
此StuffForComponent.AddRange(r.Stuff);
}
}
因此,其思想是在页面加载时创建组件,并将空列表传递给其输入参数

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


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

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

下面是子组件添加:

code{

...
 [Parameter]
    public EventCallback<List<Something>> DataChanged{ get; set; }
...
}
code{
...
[参数]
public EventCallback DataChanged{get;set;}
...
}
这是换页

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


这称为链式绑定,您可以通过搜索“chain”了解更多信息。您需要添加回调事件,以便组件正确更新。尝试在子组件上添加eventcallback,然后在页面中使用“@Bind”将页面列表绑定到子组件内部列表

下面是子组件添加:

code{

...
 [Parameter]
    public EventCallback<List<Something>> DataChanged{ get; set; }
...
}
code{
...
[参数]
public EventCallback DataChanged{get;set;}
...
}
这是换页

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


这称为链式绑定,您可以通过搜索“chain”来了解更多信息。

我找到了这个方法。这有点复杂,但可能会帮助其他人

因此,我有一个Razor页面,页面顶部有我的组件:

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

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

我已经让它工作了。这有点复杂,但可能会帮助其他人

因此,我有一个Razor页面,页面顶部有我的组件:

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

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

应该刷新。顺便问一下,您是否尝试过在'AddRange'之后使用
statehaschange()
。您在BlazorConfig上发布了一个关于在服务器端运行的问题。哈哈,BlazorConfirm是我的;)但它已被弃用,总有一天我会将其更新到最新版本。谢谢你的关注。应该更新一下。顺便问一下,您是否尝试过在'AddRange'之后使用
statehaschange()
。您在BlazorConfig上发布了一个关于在服务器端运行的问题。哈哈,BlazorConfirm是我的;)但它已被弃用,总有一天我会将其更新到最新版本。感谢您的关注。给出的示例[link]()显示了正在更新的密码箱组件中的HTML元素(
)。对于我来说,组件不是在更新“某物”(恰巧是一个
列表
),而是在父页面从该列表中添加或删除项目时做出反应。我想让组件做的是对
列表
中添加或删除了一个项目这一事实做出反应。也许可以使用ObservableCollection而不是List?给出的示例[link]()显示了正在更新的PasswordBox组件(
)中的HTML元素。对于我来说,组件不是在更新“某物”(恰巧是一个
列表
),而是在父页面从该列表中添加或删除项目时做出反应。我想让组件做的是对
列表
添加或删除了一个项目这一事实做出反应。也许可以使用ObservableCollection而不是List?属性名称是“Data”,应该是“Actions”吗?属性名称是“Data”,应该是“Actions”吗?