将组件实例绑定到循环中的元素答案

【问题标题】：Bind component instance to element in a loop将组件实例绑定到循环中的元素
【发布时间】：2021-05-05 14:43:14
【问题描述】：

所以基本上这是一个带有面板的仪表板页面（从名为 StackBlaze 的 GitHub 库中拖放项目，我确信这不会导致问题，因为我尝试删除相关的标签但问题仍然存在）。我的面板列表由 Panel 类的对象组成，每个 Panel 都有一个名为 AddEditPanel 的关联组件，该组件在这些拖放项目中呈现。在从屏幕上动态删除任何面板时，它应该从屏幕上完全删除，但会发生什么是面板获取其他面板的 AddEditPanel 组件，即。列表中的元素和关联的组件实例的绑定受到干扰。

代码片段：

<StackBlazeGrid>
@foreach (var panel in panels)
        {

            <StackBlazeItem PanelId="@panel.Id" OnUpdate="GSUpdateHandler" Options="panel.ItemOptions">
                <div class="d-flex flex-column h-100 ">
                    <div class="d-flex p-2 pl-4" style="background-color: #d3d3d387;">
                        <div class="label-heading align-items-center justify-content-center">
                            <div class="d-flex flex-column">
                                <span style="font-weight: 600;">@GetCurrentWidget(panel).Title : @GetCurrentMetric(panel).Title <span>(</span> @if(!String.IsNullOrEmpty(@panel.Title)) {@panel.Title} <span>)</span> </span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-center icon-edit ">
                            <img class=" pointer mr-2" data-toggle="tooltip" title="Alarm" src="img/common/alarm.svg" @onclick="@(() => OnAddEditAlarm(panel))" style="width: 20px; height: 20px;margin-top: 1px;">
                            @if (panel.EditMode != true)
                            {
                                <img class=" pointer mr-2" data-toggle="tooltip" title="Edit" src="img/common/edit.svg" @onclick="@(async() => {await RemoveChartForPanel(panel);panel.EditMode=true;} )" style="width: 20px; height: 20px;">
                            }
                            else
                            {
                                <img class=" pointer mr-2" data-toggle="tooltip" title="Save Changes" src="img/common/select-client.svg" @onclick="@(async() => {await panel.childPanel.HandleValidSubmit();})" style="width: 21px; height: 21px;">

                            }
                            <img class=" pointer" src="img/common/trash-can.svg" @onclick="@(async() => {panel.childPanel.RemoveWidget(); deletePanel=panel; deleteModalRef.Show();})">
                        </div>
                    </div>
                    <IoTWeb.Components.Forms.AddEditPanel @ref="panel.childPanel" widgets="widgets" metrics="metrics" payload="panel" OnEditWidget="OnEditPanelHandler" WMMList="widgetMetricMappingList"></IoTWeb.Components.Forms.AddEditPanel>
                </div>
            </StackBlazeItem>
        }
    </StackBlazeGrid>

基本上我想要一种方法将我的 AddEditPanel 组件直接绑定到循环中的面板

【问题讨论】：

标签： c# .net blazor blazor-webassembly

【解决方案1】：

使用@key=panel

@foreach (var panel in panels)
{

    <StackBlazeItem @key=panel PanelId="@panel.Id" OnUpdate="GSUpdateHandler" Options="panel.ItemOptions">
...

Docs

【讨论】：